fix(table-core): skip state update in toggleExpanded when state is unchanged#6184
fix(table-core): skip state update in toggleExpanded when state is unchanged#6184isaackaara wants to merge 2 commits intoTanStack:mainfrom
Conversation
…changed When calling row.toggleExpanded(bool) with a value matching the current expanded state, the function would still trigger onExpandedChange and cause unnecessary re-renders. This adds an early return that checks the current expanded state before proceeding with the state update, avoiding the overhead of calling onExpandedChange when no state change is needed. Closes TanStack#6136
🦋 Changeset detectedLatest commit: 6cd1aa9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
Problem
Calling
row.toggleExpanded(false)when the row is already collapsed (orrow.toggleExpanded(true)when already expanded) triggersonExpandedChangeand causes an unnecessary re-render of the entire table.As reported in #6136, this causes noticeable UI freezes when
toggleExpandedis called in high-frequency event handlers likeonBlur.Root Cause
The
toggleExpandedfunction passes an updater totable.setExpanded()unconditionally, even when the desired state matches the current state. While the updater returnsold(same reference) when no change is needed,onExpandedChangeis still invoked with the updater function, triggering React's state update flow.Fix
Added an early return that checks the current expanded state via
row.getIsExpanded()before callingtable.setExpanded(). If the desired state matches the current state, the function returns immediately, avoiding the unnecessary state update entirely.Before (workaround required)
After
Closes #6136