react-final-form Warning: Cannot update a component (`ForwardRef(Field)`) while rendering a different component (`ForwardRef(Field)`)

Warning: Cannot update a component (`ForwardRef(Field)`) while rendering a different component (`ForwardRef(Field)`)

Open slowselfip opened this issue 5 years ago • 10 comments

trafficstars

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

A react warning about "invalid set state in render" is shown when rendering the value of a conditionally rendered field that has an initialValue set.

What is the expected behavior?

That React does not print warnings in the console.

Sandbox Link

https://codesandbox.io/s/tender-sea-6fmu3?fontsize=14&hidenavigation=1&theme=dark

What's your environment?

{
  "react": 16.13.1,
  "react-dom": 16.13.1,
  "react-final-form": 6.5.1,
  "react-scripts": 3.4.1, 
  "final-form": 4.20.1
}

Other information

Note that the example is a bit contrived and that the real life scenario causing is a bit more complex.

This issue might be related to https://github.com/final-form/react-final-form/issues/828. That issue is regarding a FormSpy and this is related to a conditionally rendered Field with initialValue prop.

Thanks for taking the time and hope this can help in some way.

Aug 25 '20 10:08 slowselfip

Any news on this?

Sep 29 '21 20:09 pmartiner

I still see the same warning. I hope it will be fixed.

Oct 06 '21 05:10 Warrior109

Dec 09 '21 01:12 jaryway

Feb 15 '22 18:02 navinleon

any news on this?

Jun 07 '22 11:06 sophiabarclay

This is still an issue. Complex validation functions that might not be dependent directly on form value/values but on additional data, would still throw that warning when following the documentation and changing the key of the field. In a state of React where we can simply memoize the validate function, we don't even need final form to do that for us.