Adding debounce to react hook form

Question

I have the following controlled component set up using react-hook-forms.

          <Controller
            control={control}
            name={"test"}
            render={({ field: { onChange, value, name } }) => (
              <Dropdown
                name={name}
                value={value}
                handleChange={onChange}
                options={foodCategories()}
              />
            )}
          />

I want to call a debounce and and I tried doing the following:

            handleChange={debounce(onChange, 500)}

but I keep getting errors throw:

This synthetic event is reused for performance reasons, Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable,

How can I call debounce on a controlled react hook form component?

Seems like you want `onChange` function as debounce function, instead You `debounce`d onChange `const onChange = debounce(() => { ... } , 500)` — Hagai Harari, Nov 01 '21 at 20:12
did you ever figure this out? the above comment doesn't solve it for me — NotSimon, Dec 08 '21 at 18:51
the problem is that Controller manages all aspects of the input including the visual state. so debouncing in `onChange` is going to debounce the visual feedback also. i doubt this is ideal. it certainly isn't in my case. generally you want the feedback instant but the onChange to be debounced. this is probably something RHF would need to provide. — jpro, Mar 30 '22 at 00:25

score -5 · Answer 1 · answered Jan 07 '22 at 19:52

This could be achieved my the following implementation;

<Controller
   name={fieldName}
   rules={{ required: `errors.${fieldName}.required` }}
   render={({ field, fieldState: { error } }) => (
      <input
         type="text"
         error={error && t(`${error.message}`)}
         onChange={debounce((e) => field.onChange(e), 50)}
         defaultValue={field.value}
       />
    )}
  />

Adding debounce to react hook form

1 Answers1