Fix 'Maximum update depth exceeded' on large TabbedForm submit#11291
Open
imrans110 wants to merge 2 commits into
Open
Fix 'Maximum update depth exceeded' on large TabbedForm submit#11291imrans110 wants to merge 2 commits into
imrans110 wants to merge 2 commits into
Conversation
useFormGroup subscribed to react-hook-form's validatingFields only to compute a group-level isValidating that is not consumed anywhere (both FormTabHeader and TranslatableInputsTab read isValid only). Because react-admin wraps every validator as async, react-hook-form toggles validatingFields per field on submit; subscribing to it re-renders every form group on each toggle, so a TabbedForm with many required fields exceeds React's maximum update depth. Stop subscribing to validatingFields. Tab error badges and validation (driven by errors/isValid) are unaffected. Closes marmelab#11290
Member
|
as seen in #11290, we need a reproduction first. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Submitting a
<TabbedForm>with many required fields throws "Maximum update depth exceeded" (React'sNESTED_UPDATE_LIMIT). The same fields in a<SimpleForm>work fine. Reported in #11290 with a verified reproduction.Root cause:
useFormGroupsubscribes to react-hook-form'svalidatingFieldsto compute a group-levelisValidatingthat is not consumed anywhere (FormTabHeaderandTranslatableInputsTabread onlyisValid). Because react-admin wraps every validator asasyncinuseInput, react-hook-form togglesvalidatingFieldsper field on submit; subscribing to it re-renders every form group on each toggle, so aTabbedFormwith enough required fields across tabs exceeds React's maximum update depth.SimpleFormhas noFormGroup, so it is unaffected.Solution
Stop subscribing to
validatingFieldsinuseFormGroup. The unused group-levelisValidatingbecomes a constantfalse. Validation and the tab error badges — driven byerrors/isValid— are unchanged. Per-input async validation spinners are unaffected, since those come from each input's ownfieldState.isValidating(useController), not fromuseFormGroup.How To Test
ManyRequiredInputsstory (ra-ui-materialui/forms/TabbedForm) in Storybook and click SAVE with the fields empty: onmasterit throws "Maximum update depth exceeded"; with this fix it validates normally.yarn test-unit packages/ra-core/src/form/groups/useFormGroup.spec.tsx -t "validating state"master(the group re-renders ~38× on repeated re-validation) and passes with this fix.Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureisValidatingreference in the docs uses react-hook-form's globaluseFormState().isValidating, which this change does not affect)Closes #11290