useFormPersist causes the component to rerender on every field change about react-hook-form-persist

[hrasekj]

Yes, watch can be used with callback.

  React.useEffect(() => {
    const subscription = watch((value, { name, type }) =>
      console.log(value, name, type)
    )
    return () => subscription.unsubscribe()
  }, [watch])

https://react-hook-form.com/docs/useform/watch

[kamenskiyyyy]

Me too

[nickzelei]

Okay so I've run into this and was able to work through it by doing two things:

1. I had change the internals of useFormPersist to use the newer useWatch hook that react-hook-form provides. This causes the interface of useFormPersist to change because now instead of passing in watch, you pass in control.
2. The useFormPersist hook must be nested inside of a child component.

These two things fix the rendering issues because it causes that child component to re-render only instead of the main form component.

interface FormPersistProps {
  form: UseFormReturn<any>;
  formKey: string;
}

function FormPersist(props: FormPersistProps): ReactElement {
  const { form, formKey } = props;
  useFormPersist(formKey, {
    control: form.control,
    setValue: form.setValue,
    storage: isBrowser() ? window.sessionStorage : undefined,
  });
  return <></>;
}

Then I just have this nested like so:

function MainForm() {
  const form = useForm();
  return (
    <div>
      <FormPersist form={form} formKey={"mykey"} />
      <form>...</form>
    </div>
  );
}

This will not work with this current version of useFormPersist due to the old watch() method not working the same as the useWatch hook.
Can read more about it here: https://react-hook-form.com/docs/usewatch

PR where I made these changes if folks are interested: https://github.com/nucleuscloud/neosync/pull/1891/files