react-final-form: FormSpy - Cannot update a component while rendering a different component

The issue still persists with react-final-form@6.5.1 and final-form@4.20.1 with react version 16.13.1. Here’s what I’ve found after digging through the (compiled) library source:

1. useField() is invoked internally by the react-final-form library from within the Field component.
2. It registers the field from within the lazy initializer function of a useState() hook. This parametrizes the internal register() function with a true second argument which is the silent flag. All is fine at this point.
3. However, despite the silent setting, final-form goes into a validation loop. I see in the stack trace that it invokes runValidation() which in turn leads to notifyFieldListeners() and then to notifySubscribers() on each field. This actually brings the code path back to react-final-form, into the useEffect() call inside of which the field is registered again but this time without the silent flag.
4. The actual culprit is:

   React.useEffect(function () {
     return register(function (state) {
       if (firstRender.current) {
         firstRender.current = false;
       } else {
         setState(state);
       }
     }, false);
   }
   

I think the following happens: from the aspect of one particular field, registration indeed happens properly (first with the silent and then without the silent flag) but other fields could have completed this cycle already. So, when a field gets initialized it runs into the validation loop, causing the setState() call to take place inside other fields, thereby violating the rule.

I have no suggestion at this point as to how it could be solved though.

Hi all, I have been battling this issue while migrating from Redux-Form to React-Final-Form. Redux-Form has isDirty() in its API so I could easily get the state of a Form and use it in another (external) component. The only similar thing I can find for Final Form is FormSpy ( if not please let me know! ). In the end I had to give up and push the “dirty” flag into redux (in effect, rolling my own isDirty() for final-form) : which is when I bumped into the issue you are talking about here.

So far the only way I can get rid of the Warning is by wrapping the redux dispatch call in a cheeky setTimeout(,0). Hacky, stochastic, but it is working at least. Defo not a solution long term but thought I’d share 😃

   // passed to FormSpy's onChange
   onChange = ({dirty}) => {
    // dodgy workaround to avoid Warning :P
    setTimeout(()=>this.props.dispatch( formActions.changed({dirty}) ) ,0)
  }

Hi guys, Is there any fix for this issue on the horizon? We are experiencing the same error; Although, our stack involves slightly more moving parts so it is difficult to diagnose correctly where the issue arises: react-final-form: ˆ6.5.7 react-final-form-arrays: ˆ3.1.3 @dnd-kit/sortable: 7.0.0 Also various ui component libraries.

As far as I understood, the issue is caused by final-form setting state while rerendering? Are there any news from the lib maintainer?

Please see https://github.com/final-form/react-final-form/issues/985#issuecomment-1363973861

wrapping the callback in requestAnimationFrame solved the problem for me

<FormSpy
    subscription={{ values: true }}
    onChange={(state) => {
        requestAnimationFrame(() => {
             // your callback body
        });
    }}
/>

@ThaNarie I hope you get rid of the error when you write it like this. this is how i solved it <FormSpy subscription={{ values: true,modified: true, }} onChange={change => { // fired during rendering, calling a useState setter fails if(Object.keys(state.modified).length > 0){ setValues(change.values);} }} />