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

jkahlina commented 2 years ago

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:

davoam commented 2 years ago

I have exactly the same issue

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.

slavasitnikov commented 1 year ago

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.

final-form / react-final-form