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

slowselfip commented 3 years ago

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.

pmartiner commented 2 years ago

Any news on this?

Warrior109 commented 2 years ago

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

jaryway commented 2 years ago

+1

navinleon commented 2 years ago

+1

sophiabarclay commented 2 years ago

any news on this?

kure- commented 2 years ago

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.