final-form / final-form/react-final-form

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

Open
#985 2 comments 3 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

### 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](https://codesandbox.io/s/final-form-console-error-w7ue89):
```
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](https://final-form.org/docs/react-final-form/types/FieldProps#validate):

> ⚠️ 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](https://codesandbox.io/s/final-form-console-error-w7ue89)

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.