Have a way to better handle state change events

[AdeAttwood]

Problem to solve

Currently, there is no way to nicely handle state changes. This is useful for features like keeping a snapshot of the form state in local storage to protect against loosing form data on a page refresh before the form is saved. You could also use this to debounce the save / update after a period of inactivity, this would allow you to omit the page save and have an auto save feature.

As of now, the best way to do this is to create a component that does not render anything and uses the form context to subscribe to changes with useEffect

const ReactFormLocalStorage = ({ key }) => {
  const { formState } = useFormContext();
  React.useEffect(() => {
    window.localStorage.setItem(`rf_${key}`, JSON.stringify(formState));
  }, [formState]);

  return null;
};

Then you would have to render the component in the Form

const Component = () => {
  return (
    <Form>
      <ReactFormLocalStorage key="search_form" />
    </Form>
  );
};

Proposal

Allow the user to pass in an onChange function that will be called on state changes. The props passed in will be the contents of the context using the getContextValue this should give us enough info to get what we need done.

The form state subscription would then look like:

const Component = () => {
  const onChange = ({ formState }) => {
    window.localStorage.setItem("rf_search_form", JSON.stringify(formState));
  };

  return <Form onChange={onChange} />;
};

The auto save feature would then look something like:

const Component = () => {
  const timeOutRef = React.useRef(null);
  const onChange = ({ submit }) => {
    if (timeOutRef.current !== null) {
      clearTimeout(timeOutRef.current);
      timeOutRef.current = null;
    }

    timeOutRef.current = setTimeout(submit, 1000);
  };

  return <Form onChange={onChange} />;
};