Nested field with validator gives Maximum update depth exceeded

mrassili commented 3 years ago

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:

                                <Field
                                  renderer={({ value, onChange }) => (
                                  …
                                    <Field
                                      validate={composeValidators(required())}
                                    />
                                    …
                                  )}
                                  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 (<anonymous>)
    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

mrassili commented 3 years ago

@erikras do you have any clue on this please?

tjb042 commented 3 years ago

@mrassili this may be because of how validation works on Fields in final-form. By default when a field changes it triggers validation on all fields in the form. I'm guessing that could cause a cascade here until update-depth is exceeded.

Fields have a prop called validateFields which is a string array of names of other fields that should be validated when this one validates. If you set this field to an empty array then no other fields will be validated when this one changes. (See: FieldProps). If you set validateFields={[]} on the nested Field does it prevent the exception?

mrassili commented 3 years ago

@tjb042 No it does not. I tried setting validateFields on both nested and parent fields, it didn't work.

I ended up making the fields siblings to avoid this exception

final-form / react-final-form