useFastField that uses local state `onChange` and sync back to formik only `onBlur`

useFastField.tsx

import React, { useState, useEffect } from 'react';
import { useField, FieldHookConfig, FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
import { useDebouncedCallback } from 'use-debounce';

const DEBOUNCE_DELAY = 300;

export function useFastField<Val = any>(
  propsOrFieldName: string | FieldHookConfig<Val>,
): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>] {
  const [field, meta, helpers] = useField<Val>(propsOrFieldName);
  const [value, setValue] = useState<Val>(field.value);
  const { onBlur, onChange } = field;
  const { setValue: helpersSetValue } = helpers;
  const { shouldResync = true } = propsOrFieldName;

  const currentFieldValue = field.value;

  // resync field.value
  useEffect(() => {
    if (shouldResync) {
      if (currentFieldValue !== value) {
        setValue(currentFieldValue);
      }
    }
  }, [currentFieldValue, shouldResync]);

  const [onSync] = useDebouncedCallback((e) => {
    onChange(e);
    onBlur(e);
  }, DEBOUNCE_DELAY);

  const [onSyncValue] = useDebouncedCallback((val: Val) => {
    helpersSetValue(val);
    helpers.setTouched(true);
  }, DEBOUNCE_DELAY);

  // monkey patch formik field
  field.value = value;
  field.onChange = (e: React.ChangeEvent<any>): void => {
    if (e && e.currentTarget) {
      setValue(e.currentTarget.value);
    }
    onSync(e);
  };
  field.onBlur = (e: any): void => {
    onChange(e);
    onBlur(e);
  };

  helpers.setValue = (val: Val) => {
    setValue(val);
    onSyncValue(val);
  };

  return [field, meta, helpers];
}

if you will set field by other field (with setFieldValue from useFormikContext)
you can use like below

import {
  useFormikContext,
  useField as useFormikField,
  FieldInputProps,
  FieldMetaProps,
  FieldHelperProps as FormikFieldHelperProps,
} from "formik";
import { get, isEqual } from "lodash";
import {
  useCallback,
  useState,
  useEffect,
  ChangeEvent,
  FocusEvent,
} from "react";

export interface FieldHelperProps<T>
  extends Omit<FormikFieldHelperProps<T>, "setValue"> {
  setValue: (
    value: T,
    isCrossFieldSetValue?: boolean | undefined,
    shouldValidate?: boolean | undefined,
  ) => void;
}

export function useField<Value>(
  name: string,
): [FieldInputProps<Value>, FieldMetaProps<Value>, FieldHelperProps<Value>] {
  const interval = 300;

  const [field, meta, helper] = useFormikField<Value>(name);

  const [formikFieldValue, setFormikFieldValue] = useState(field.value);
  const { values, setFieldValue } = useFormikContext();

  const { onBlur, onChange } = field;

  const [fieldChangeEvent, setFieldChangeEvent] =
    useState<ChangeEvent<unknown> | null>(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      if (fieldChangeEvent && fieldChangeEvent?.target) {
        onChange(fieldChangeEvent);
      }
    }, interval);

    return () => clearTimeout(timeout);
  }, [fieldChangeEvent, onChange]);

  field.onChange = useCallback((e: ChangeEvent<unknown>) => {
    if (e && e.target) {
      const target = e.target as HTMLInputElement;

      setFormikFieldValue(target.value as unknown as Value);

      setFieldChangeEvent(e);
    }
  }, []);

  field.onBlur = useCallback(
    (e: FocusEvent<unknown, Element>) => {
      onChange(e);
      onBlur(e);
    },
    [onBlur, onChange],
  );

  helper.setValue = useCallback(
    (
      nextFieldValue: Value,
      isCrossFieldSetValue = false,
      shouldValidate?: boolean,
    ) => {
      setFormikFieldValue(nextFieldValue);
      if (isCrossFieldSetValue) {
        setFieldValue(name, nextFieldValue, shouldValidate);
      }
    },
    [name, setFieldValue],
  );

  field.value = formikFieldValue;

  // when values was updated in formik context, it should replace formikFieldValue by newest value
  useEffect(() => {
    if (isEqual(formikFieldValue, get(values, name))) {
      return;
    }
    setFormikFieldValue(get(values, name));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [name, values]);

  return [field, meta, helper];
}