🎥 feat: make useWatch and useController to react to name change#13070
🎥 feat: make useWatch and useController to react to name change#13070bluebill1049 merged 11 commits intoreact-hook-form:masterfrom
useWatch and useController to react to name change#13070Conversation
…on name and control changes
|
e2e test breaks |
|
@bluebill1049 this looks like an CI issue |
|
Have you tried locally? I don't see this issue on other prs. |
|
Locally they work |
|
interesting i will check over the weekend thanks @aspirisen for the pr! |
There was a problem hiding this comment.
Pull Request Overview
This PR makes the useController and useWatch hooks react to changes in their name and control props, addressing a limitation where these hooks would not update when these key properties changed during re-renders.
- Refactored
useWatchto detect and respond to changes innameandcontrolprops - Added synchronous value updates when props change to ensure immediate consistency
- Enhanced test coverage with scenarios for both changing field names and control objects
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/useWatch.ts | Restructured hook to track prop changes and provide immediate value updates when name or control changes |
| src/tests/useWatch.test.tsx | Added tests verifying reactive behavior for changing field names and control objects |
| src/tests/useController.test.tsx | Added tests verifying useController reacts to changing field names and control objects |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
…rence before deepEqual and caching computed output to reduce duplicate calls.
src/useWatch.ts
Outdated
| // If name or control changed for this render, synchronously reflect the | ||
| // latest value so callers (like useController) see the correct value | ||
| // immediately on the same render. | ||
|
|
||
| // Optimize: Check control reference first before expensive deepEqual | ||
| const controlChanged = _prevControl.current !== control; | ||
| const nameChanged = !controlChanged && !deepEqual(_prevName.current, name); | ||
| const shouldReturnImmediate = controlChanged || nameChanged; |
There was a problem hiding this comment.
I think we can bring this as part of the following memo, probably only need the controlChanged to be left out.
bluebill1049
changed the title
useWatch and useController to react to name change
…g control changes first and optimizing memoization for computed output.
…nsuring immediate return on control and name changes while simplifying the conditions for output calculation.
Make
useControlleranduseWatchto react tonameandcontrolchangeCloses: #12974
Related: #13009