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

Nested field with validator gives Maximum update depth exceeded

Open
#914 3 comments 0 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**?

could be a bug

### What is the current behavior?

I have a nested field that when I attach a validator gives this React error with this stack trace
If I remove the validators from the nested fields it works

The code basically looks like this:

```
(



)}
id={…}
name={…}
validate={composeValidators(required())}
/>

```

Maybe someone can spot the culprit here

```
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (react-dom.development.js?61bb:23093)
at scheduleUpdateOnFiber (react-dom.development.js?61bb:21164)
at dispatchAction (react-dom.development.js?61bb:15660)
at eval (react-final-form.es.js?9cfd:198)
at eval (final-form.es.js?f3ac:326)
at notifySubscriber (final-form.es.js?f3ac:400)
at eval (final-form.es.js?f3ac:417)
at Array.forEach ()
at notify (final-form.es.js?f3ac:409)
at notifyFormListeners (final-form.es.js?f3ac:854)
at notify (final-form.es.js?f3ac:1091)
at runValidation (final-form.es.js?f3ac:706)
at Object.registerField (final-form.es.js?f3ac:1119)
at register (react-final-form.es.js?9cfd:490)
at eval (react-final-form.es.js?9cfd:545)
at commitHookEffectListMount (react-dom.development.js?61bb:19731)
at commitPassiveHookEffects (react-dom.development.js?61bb:19769)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
at invokeGuardedCallback (react-dom.development.js?61bb:292)
at flushPassiveEffectsImpl (react-dom.development.js?61bb:22853)
at unstable_runWithPriority (scheduler.development.js?3069:653)
at runWithPriority$1 (react-dom.development.js?61bb:11039)
at flushPassiveEffects (react-dom.development.js?61bb:22820)
at performSyncWorkOnRoot (react-dom.development.js?61bb:21737)
at eval (react-dom.development.js?61bb:11089)
at unstable_runWithPriority (scheduler.development.js?3069:653)
at runWithPriority$1 (react-dom.development.js?61bb:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js?61bb:11084)
at flushSyncCallbackQueue (react-dom.development.js?61bb:11072)
at discreteUpdates$1 (react-dom.development.js?61bb:21893)
at discreteUpdates (react-dom.development.js?61bb:806)
at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)
```

### What is the expected behavior?

a nested field shouldn't cause infinite loop

### Sandbox Link

### What's your environment?

React Final Form v6.5.1
Final Form v4.20.0
Chrome
Node v12.14.0

### Other information

Similar issue #408 #625

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the nested Field case with validators, then trace the reported registerField and runValidation path in react-final-form and final-form. Compare the behavior with related issues #408 and #625; done means a nested field with a validator no longer causes React's maximum update depth error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.