fix(vue-form): prevent full array re-renders in array mode#1963
Conversation
|
|
View your CI Pipeline Execution ↗ for commit 666343b
☁️ Nx Cloud last updated this comment at |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1963 +/- ##
==========================================
+ Coverage 90.35% 97.10% +6.74%
==========================================
Files 38 2 -36
Lines 1752 69 -1683
Branches 444 4 -440
==========================================
- Hits 1583 67 -1516
+ Misses 149 2 -147
+ Partials 20 0 -20 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
CI is green and coverage is fixed. |
|
Wait, I'm confused - shouldn't this be avoided as-of https://github.com/TanStack/form/releases/tag/%40tanstack%2Fvue-form%401.27.7 ? |
|
I checked the 1.27.7 changes and this does not reintroduce the behavior avoided there. The change in 1.27.7 avoids subscribing to the full field state to prevent unnecessary updates. If there’s a specific concern with multiple useStore subscriptions in Vue, I’m happy to adjust the approach. |
|
I see this mentions Vue but the behavior also happens in react |
|
@crutchcorn Yeah, it should be avoided, but while it is fixed in React, in Vue, it still re-renders each field after each change in any array field that significantly affects the performance. You could see the repro from the linked issue |
# Conflicts: # packages/vue-form/src/useField.tsx
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughuseField now selects only needed store slices (value and granular meta fields), builds a computed fieldState exposing ChangesArray Field Re-render Optimization
Sequence Diagram(s)sequenceDiagram
participant Client
participant FieldComponent
participant FieldStore
Client->>FieldComponent: render field (mode="array")
FieldComponent->>FieldStore: subscribe to value.length + meta flags
Client->>FieldComponent: call field.pushValue("b")
FieldComponent->>FieldStore: push value -> updates value length
FieldStore->>FieldComponent: notify (length change)
FieldComponent->>Client: re-render limited to array-length-aware parts
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/vue-form/tests/useField.test.tsx (1)
405-431: ⚡ Quick winAdd an explicit “no sibling rerender” regression assertion.
This test confirms
pushValueupdates value, but it doesn’t verify the core performance guarantee from the issue. Consider adding a render-count spy to assert that editing one array item does not rerender unaffected siblings inmode="array".Suggested test pattern
+ const siblingRenderSpy = vi.fn() ... + {field.state.value.map((_, i) => ( + <form.Field key={i} name={`test[${i}]`}> + {({ field: subField }: { field: AnyFieldApi }) => { + if (i === 1) siblingRenderSpy() + return <input value={subField.state.value} ... /> + }} + </form.Field> + ))} ... + const before = siblingRenderSpy.mock.calls.length + await user.type(firstInput, 'x') + expect(siblingRenderSpy.mock.calls.length).toBe(before)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/vue-form/tests/useField.test.tsx` around lines 405 - 431, The test is missing an assertion that pushing into an array does not rerender unaffected siblings; add a render-count spy by rendering each array item as its own small component (e.g., ItemA and ItemB inside the form.Field render) that increments a visible counter or calls a jest.fn on each render, then call field.pushValue('b') and assert the newly pushed item renders but the pre-existing sibling's render count did not increase; locate the Comp component and the form.Field/mode="array" usage and add the per-item render counters and expectations around field.pushValue to assert no sibling rerender.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/vue-form/tests/useField.test.tsx`:
- Around line 405-431: The test is missing an assertion that pushing into an
array does not rerender unaffected siblings; add a render-count spy by rendering
each array item as its own small component (e.g., ItemA and ItemB inside the
form.Field render) that increments a visible counter or calls a jest.fn on each
render, then call field.pushValue('b') and assert the newly pushed item renders
but the pre-existing sibling's render count did not increase; locate the Comp
component and the form.Field/mode="array" usage and add the per-item render
counters and expectations around field.pushValue to assert no sibling rerender.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 215eaf90-3766-45a2-812e-d4c3255e200c
📒 Files selected for processing (2)
packages/vue-form/src/useField.tsxpackages/vue-form/tests/useField.test.tsx
|
Good catch, all. I've updated the code to reflect the React adapter better and updated the Vue array docs to include Thanks for your patience with us! |
4 participants
Closes #1961
Problem
In the Vue adapter,
useFieldcurrently subscribes to the entire field state via: