How Do I Manage State Outside Of React Final Form?

I want to store the state of my React Final Form somewhere. Right now that is in a React Hook. I'm currently using useMethods, similar to useState. The form I currently have is par

Solution 1:

Always fascinated to discover a use case I'd never have considered. Since react-final-form@6.1.0, you can now provide your own final-form form instance, via the form prop. This, if stored at a higher place in the tree – with a useRef(), probably – might let you maintain form state for longer? 🤔

Just a guess. Do report back if it works...

Solution 2:

I just had a similar issue, and manged to create a decorator that remembers the touched (or any other field state) and then re applies that state when the field is mounted again. One major issue is that this causes a flicker as the field is rendered not touched on mount, then the decorator is notified, then the field is rendered touched.

Some example code (not tested):

functiondecorator(form) {
  const storedTouched = {};
  return form.subscribe(({touched}) => {
    for(const field ofObject.keys(touched)) {
      if(touched[field]) {
        storedTouched[field] = true;
      }
    }
    for(const field ofObject.keys(storedTouched)){
      if(touched[field] === false) { // check against false since unregistered fields are undefined
        form.mutators.setFieldTouched(field, true);
      }
    }
  }, {touched: true});
}

You could also expose the storedTouched to allow setting any field touched, not just those that are already mounted/registered. (eg initialize it to the fields that were already touched last time)