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

Author: jkahlinaCreated Apr 18, 2022Updated Oct 5, 2025

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. https://github.com/final-form/react-final-form/issues/850
  2. https://github.com/final-form/react-final-form/issues/828
  3. https://github.com/final-form/react-final-form/issues/797

Source: final-form/react-final-form