Load form values from local storage

[etomanon]

Hello,

I have problem with loading form values from local storage because it causes endless loop.
I guess that watch() is updated more frequently than on change?
Any idea how to save data to local storage (on form change) and then on mount (first render) load data from local storage to the form?
Here is my approach:
https://codesandbox.io/s/endless-loop-local-storage-rxpup

[bluebill1049]

i would read the local storage data at useEffect and use reset to update the entire form.

[ialsowalkdogs]

@etomanon
Hello! Did you manage to solve your issue? I am working on a similar case and would be grateful if you shared a result that works for you.

[etomanon]

@berrybell
Yes, I solved it: https://codesandbox.io/s/endless-loop-local-storage-forked-4dgu8?file=/src/App.js:312-319

[pkino]

@bluebill1049

i would read the local storage data at useEffect and use reset to update the entire form.

I have a question about this.
Which do you think is better reading local storage data at useEffect or reading local storage data at default values of useForm and firing trigger at useEffect.
In my case, I have a disabled submit button until validation is ok, so I have to validate local storage data.

[bluebill1049]

if you can, defaultValues at useForm seems to be a better option.

[chrift]

FWIW, if anyone else comes across this, I have started to adopt a pattern of having my page actually being a dataloader, which renders the main page content after it knows whether there are default values (loaded from localStorage/localforage)

It seemed to be more reliable than using a reset in a useEffect or reading from the storage actually in the defaultValues assignment.

Like this:

export default function PageDataLoader() {
  const [initialData, setInitialData] = useState<Form | null>();

  useEffect(() => {
    const loadFormData = async () => {
      const savedForm = await localforage.getItem<Form>(
        'storage-key'
      );

      setInitialData(savedForm);
    };

    loadFormData();
  }, []);

  if (initialData !== undefined) {
    return <Page initialData={initialData || undefined} />;
  }

  return 'Loading...';
}


function Page({
  initialData,
}: {
  initialData?: Form;
}) {
  const {
    control,
    handleSubmit,
    register: registerInput,
    watch,
    setValue,
  } = useForm<Form>({
    values: initialData,
    shouldUnregister: true,
  });
}