Maximum Update Depth on setState

[gabrielrotbart]

Are you submitting a bug report or a feature request?

Possilbe bug. Or I'm missing something obvious.

What is the current behavior?

Building a Field as a function component inside a function component causes the component to keep setting setState until it dies.

For some reason !shallowEqual(s, stateRef.current) keeps returning false which tries to set a new new form state. But locally I can't see where the differences are.

What is the expected behavior?

Render the component without error.

Sandbox Link

I've adapted one of the official examples to reflect this behavior: https://codesandbox.io/s/max-depth-exceeded-reusable-field-groups-p33os

And here is the same with returning Field as top level of that component, working as expected: https://codesandbox.io/s/max-depth-exceeded-working-reusable-field-groups-pxc97

What's your environment?

"react": "^16.9.0" "react-final-form": "^6.3.0" "final-form": "^4.18.3"

Other information

I might be missing something in how I use Final Form (do Fields need to always be top level return values?)

Here is an attempt to log what is happening inside the subscription useEffect:

console.log node_modules/react-final-form/dist/react-final-form.cjs.js:185
    ------ shallowEqual false

  console.log node_modules/react-final-form/dist/react-final-form.cjs.js:183
    ------ stateRef.current { active: undefined,
      dirty: false,
      dirtyFields: {},
      dirtySinceLastSubmit: false,
      error: undefined,
      errors: {},
      hasSubmitErrors: false,
      hasValidationErrors: false,
      initialValues: undefined,
      invalid: false,
      modified: { firstName: false },
      pristine: true,
      submitting: false,
      submitError: undefined,
      submitErrors: undefined,
      submitFailed: false,
      submitSucceeded: false,
      touched: { firstName: false },
      valid: true,
      validating: false,
      values: {},
      visited: { firstName: false } }

  console.log node_modules/react-final-form/dist/react-final-form.cjs.js:184
    ------ subscription { active: undefined,
      dirty: false,
      dirtyFields: {},
      dirtySinceLastSubmit: false,
      error: undefined,
      errors: {},
      hasSubmitErrors: false,
      hasValidationErrors: false,
      initialValues: undefined,
      invalid: false,
      modified: {},
      pristine: true,
      submitting: false,
      submitError: undefined,
      submitErrors: undefined,
      submitFailed: false,
      submitSucceeded: false,
      touched: {},
      valid: true,
      validating: false,
      values: {},
      visited: {} }

  console.log node_modules/react-final-form/dist/react-final-form.cjs.js:185
    ------ shallowEqual false

  console.log node_modules/react-final-form/dist/react-final-form.cjs.js:183
    ------ stateRef.current { active: undefined,
      dirty: false,
      dirtyFields: {},
      dirtySinceLastSubmit: false,
      error: undefined,
      errors: {},
      hasSubmitErrors: false,
      hasValidationErrors: false,
      initialValues: undefined,
      invalid: false,
      modified: { firstName: false },
      pristine: true,
      submitting: false,
      submitError: undefined,
      submitErrors: undefined,
      submitFailed: false,
      submitSucceeded: false,
      touched: { firstName: false },
      valid: true,
      validating: false,
      values: {},
      visited: { firstName: false } }

  console.log node_modules/react-final-form/dist/react-final-form.cjs.js:184
    ------ subscription { active: undefined,
      dirty: false,
      dirtyFields: {},
      dirtySinceLastSubmit: false,
      error: undefined,
      errors: {},
      hasSubmitErrors: false,
      hasValidationErrors: false,
      initialValues: undefined,
      invalid: false,
      modified: { firstName: false },
      pristine: true,
      submitting: false,
      submitError: undefined,
      submitErrors: undefined,
      submitFailed: false,
      submitSucceeded: false,
      touched: { firstName: false },
      valid: true,
      validating: false,
      values: {},
      visited: { firstName: false } }

[komsikov]

yes, i have similar problems

[BMCwebdev]

@gabrielrotbart or @kddaddy either of you ever find a solution to this issue? (@gabrielrotbart it looks as if your two examples are the same code, perhaps things changed since making this post?)

[dananjayag]

Yes, I have similar problem