FormikFieldSpy

FormikFieldSpy.js

import { useMemo, useEffect } from 'react'

import { getIn, connect } from 'formik'

import { useThrottle } from './useThrottle'

export const FormikFieldSpy = connect(
  ({ field, onChange, timeout, formik }) => {
    const value = useMemo(() => getIn(formik.values, field), [
      field,
      formik.values
    ])

    const handle = useThrottle(onChange, timeout)

    useEffect(() => {
      handle(value, formik)
    }, [value, onChange])

    return null
  }
)

useThrottle.js

import { useRef, useEffect, useCallback } from 'react'

export function useThrottle(fun, timeout) {
  const timer = useRef(null)

  const cancel = useCallback(() => {
    if (timer.current) {
      clearTimeout(timer.current)

      timer.current = null
    }
  }, [timer])

  useEffect(() => {
    cancel()
  }, [cancel])

  return (...args) => {
    cancel()

    timer.current = setTimeout(() => {
      timer.current = null

      fun.apply(this, args)
    }, timeout)
  }
}