Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Console warning when forcing a rerender of a field using a key and a new validate function #985

Open
jkahlina opened this issue Apr 18, 2022 · 3 comments

Comments

@jkahlina
Copy link

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Changing the key of a field in order to rerender it with a new validate prop results in a console warning.

Example console warning from provided sandbox:

Warning: Cannot update a component (`TextField`) while rendering a different component (`TextField`). To locate the bad setState() call inside `TextField`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at TextField (https://w7ue89.csb.app/src/App.tsx:55:19)
    at ConditionalValidationTextField (https://w7ue89.csb.app/src/App.tsx:79:51)
    at div
    at form
    at ReactFinalForm (https://w7ue89.csb.app/node_modules/react-final-form/dist/react-final-form.es.js:170:20)
    at div
    at App

What is the expected behavior?

There is no warning on rerender of field.

My understanding is that this is the proper way to change the inline validation on a field:

⚠️ IMPORTANT ⚠️ – By default, in order to allow inline fat-arrow validation functions, the field will not rerender if you change your validation function to an alternate function that has a different behavior. If you need your field to rerender with a new validation function, you will need to update another prop on the Field, such as key.

Sandbox Link

Example with a conditional validate function

What's your environment?

{
  "final-form": "4.20.6",
  "react": "18.0.0",
  "react-dom": "18.0.0",
  "react-final-form": "6.5.9",
  "react-scripts": "4.0.3"
}

Other information

There are a few related issues that have a similar symptom:

  1. Warning: Cannot update a component (ForwardRef(Field)) while rendering a different component (ForwardRef(Field)) #850
  2. Warning: Cannot update a component (Title) while rendering a different component (FormSpy) #828
  3. FormSpy onChange causes warning "Cannot update a component while rendering a different component" #797
@davoam
Copy link

davoam commented Apr 20, 2022

I have exactly the same issue

@kure-
Copy link

kure- commented Jun 17, 2022

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.

@slavasitnikov
Copy link

slavasitnikov commented Dec 23, 2022

I think I found a workaround. If I use the prop data instead of key then the dynamic validation works and there are no warnings/errors.

See fix:
https://codesandbox.io/s/final-form-console-error-forked-7cesti?file=/src/App.tsx

Also, now it is not working for final-form-arrays. I am planning to open PR with forwarding prop data in useField:
https://github.com/final-form/react-final-form-arrays/blob/master/src/useFieldArray.js#L62-L69

I'm not sure if this is the correct fix. Maybe I'm missing some cases.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants