🐞 fix: respect parent-provided useFieldArray rules (#13082)#13083
Merged
bluebill1049 merged 6 commits intoreact-hook-form:masterfrom Oct 9, 2025
Merged
🐞 fix: respect parent-provided useFieldArray rules (#13082)#13083bluebill1049 merged 6 commits intoreact-hook-form:masterfrom
bluebill1049 merged 6 commits intoreact-hook-form:masterfrom
Conversation
bluebill1049
reviewed
Oct 8, 2025
src/useFieldArray.ts
Outdated
Comment on lines
112
to
116
| rules && | ||
| (control as Control<TFieldValues, any, TTransformedValues>).register( | ||
| name as FieldPath<TFieldValues>, | ||
| rules as RegisterOptions<TFieldValues>, | ||
| ); |
Member
There was a problem hiding this comment.
could we try to use rules with ref instead? would be good if we can still keep the memo.
const rulesRef = useRef(rules)
reulsRef.current = rules
Contributor
Author
There was a problem hiding this comment.
const rulesRef = React.useRef(rules);
rulesRef.current = rules;
control._names.array.add(name);
rulesRef.current &&
(control as Control<TFieldValues, any, TTransformedValues>).register(
name as FieldPath<TFieldValues>,
rulesRef.current as RegisterOptions<TFieldValues>,
);rulesRef as suggested. This keeps the latest rules value in a ref while preserving memoization. Test passes. Does this look right?
Member
There was a problem hiding this comment.
const rulesRef = React.useRef(rules);
rulesRef.current = rules;
const _actioned = React.useRef(false);
control._names.array.add(name);
React.useMemo(
() =>
rules &&
(control as Control<TFieldValues, any, TTransformedValues>).register(
name as FieldPath<TFieldValues>,
rulesRef.current as RegisterOptions<TFieldValues>,
),
[control, name],
);what about this?
Contributor
Author
There was a problem hiding this comment.
re-ran the test suite, but it still fails.
Contributor
Author
There was a problem hiding this comment.
React.useMemo(
() =>
rules &&
(control as Control<TFieldValues, any, TTransformedValues>).register(
name as FieldPath<TFieldValues>,
rules as RegisterOptions<TFieldValues>,
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[control, name, fields.length, rules],
);What do you think about this code?
bluebill1049
approved these changes
Oct 9, 2025
Member
bluebill1049
left a comment
bluebill1049
left a comment
There was a problem hiding this comment.
ty very much for the fix
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
2 participants
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.
⏺ Summary
fixes #13082
Problem
When rules were passed to useFieldArray from a parent component, they were wrapped in React.useMemo without proper dependencies, causing the rules to be registered only once during initial render. If the rules object reference changed (e.g., created inline or from useMemo in parent), the validation would not update
properly.
Solution
Changes