Skip to content

Conversation

@rezha4
Copy link

@rezha4 rezha4 commented Nov 16, 2025

…mo to avoid unneccessary remounts

🎯 Changes

Unneccessary component remounts fixed by checking resize inside UseMemo.
Refer to issue and original solution #6121 by @ItaiYospehi

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Performance
    • Optimized column-resizing performance in the example application. The rendering efficiency during resize operations has been enhanced through improved memoization logic that intelligently adapts based on resizing state. This results in fewer unnecessary component re-renders during resize sessions and smoother, more responsive user interactions overall.

@changeset-bot
Copy link

changeset-bot bot commented Nov 16, 2025

⚠️ No Changeset found

Latest commit: 59fc938

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link

coderabbitai bot commented Nov 16, 2025

Walkthrough

The memoization strategy for the TableBody component in the column-resizing performance example was restructured. The MemoizedTableBody now renders whenever enableMemo is true and uses a conditional comparator that activates memoization only during active column resizing, forcing re-renders outside of resizing sessions.

Changes

Cohort / File(s) Change Summary
Memoization Comparator Update
examples/react/column-resizing-performant/src/main.tsx
Updated React.memo comparator logic for MemoizedTableBody. Comparator now checks if a column is actively resizing via next.table.getState().columnSizingInfo.isResizingColumn; during resizing, compares data references to determine re-render necessity; outside resizing, returns false to force re-render. Also adjusted conditional rendering to show MemoizedTableBody whenever enableMemo is true rather than only during active resizing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Memoization logic validation: Verify the conditional comparator correctly implements the intended optimization strategy and doesn't introduce stale closures or memory leaks
  • Re-render behavior verification: Ensure the force re-render outside resizing sessions aligns with performance goals and doesn't cause unexpected flickering
  • enableMemo toggle behavior: Confirm the updated conditional rendering logic properly respects the enableMemo state and provides intended optimization control

Poem

Ah, the column resizes with grace,
Memoization now knows its place!
🐰 When resizing flows, we hold our state,
But outside—we dance and re-render straight!
A performance leap, both swift and keen. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check ❓ Inconclusive The title is partially related to the changeset, referring to a real aspect of the change (checking resize inside UseMemo in a performant column-resize example) but appears incomplete, cutting off mid-sentence with an ellipsis. Complete the title by finishing the sentence clearly. Consider a full title like: 'docs: fix unnecessary remounts in column-resize-performant example by checking resize inside useMemo'.
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The PR description follows the required template structure with all key sections present: changes explanation, checklist items completed, and release impact clarified.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

  • Provide custom instructions to shape the summary (bullet lists, tables, contributor stats, etc.).
  • Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example:

"Create a concise high-level summary as a bullet-point list. Then include a Markdown table showing lines added and removed by each contributing author."


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant