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];
}

It still does re-render everything after that timeout. Is there anyway to prevent that?

Isn't value missing from the useEffect dependencies array? Or was that intentionally omitted?

- }, [currentFieldValue, shouldResync]);
+ }, [currentFieldValue, shouldResync, value]);

Also, the shouldResync condition could be inlined.

-    if (shouldResync) {
-      if (currentFieldValue !== value) {
-        setValue(currentFieldValue);
-      }
-    }
+    if (shouldResync && currentFieldValue !== value) {
+      setValue(currentFieldValue);
+    }

tks, it is missing

I'm going to update it

Sorry for the unprompted opinion, but I'm honestly not sure about the monkey patching of helpers here. The way I see it, a user manually calling setValue should expect the action to have an immediate effect on the entire form - without it being delayed by some arbitrary number of milliseconds.

All other ideas implemented here seem very reasonable to me, though.

without the debounce, it would be the same as useField

how would you solve this?

I think a Recoil based implementation would solve most of these problems

I was commenting on the helpers patching in particular - the debouncing would still happen inside the onChange callback.

Going back to the useEffect dependencies for a bit, after taking a closer look, I now believe value should not be declared as a dependency as it'd trigger an update of your internal state using an outdated field value.

  useEffect(() => {
    if (shouldResync) {
      if (currentFieldValue !== value) {
        setValue(currentFieldValue);  // <-- This resets the internal state to the PREVIOUS form field value (before the last flush)
      }
    }
  }, [currentFieldValue, shouldResync, value]); // <-- Every char you type triggers the effect (if value is included as dep)

  // ...

  field.onChange = e => {
    if (e && e.currentTarget) {
      setValue(e.currentTarget.value); // <-- Every char you type goes into the state
    }
    onSync(e); // <-- Changes will be flushed to Formik after ~300ms when typing stops
  };

I made a change to trigger onChange when stop typing

import { useState, useEffect } from "react";
import { useField } from "formik";

export function useFastField(propsOrFieldName) {
  const INTERVAL = 250;

  const [field, meta, helpers] = useField(propsOrFieldName);
  const [value, setValue] = useState(field.value);
  const { onBlur, onChange } = field;
  const [fieldChangeEvent, setFieldChangeEvent] = useState();

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

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

  field.value = value;

  field.onChange = e => {
    if (e && e.target) {
      setValue(e.currentTarget.value);

      e.persist();
      setFieldChangeEvent(e);
    }
  };

  field.onBlur = e => {
    onChange(e);
    onBlur(e);
  };

  helpers.setValue = value => {
    setValue(value);
  };

  return [field, meta, helpers];
}

this will have bug when just use helper.setValue,
it should call onChange ,or the value won't be update

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];
}