[Suggestion] Column Resizing Example Forces Component Remounts

[ItaiYosephi]

TanStack Table version

v8.11.6

Framework/Library version

React

Describe the bug and the steps to reproduce it

Here's the updated title and issue using proper React terminology:

Suggestion: Fix Component Remounting in Column Resizing Performant Example

Problem

The column resizing performant example forces component remounting instead of reconciliation during mouse down/up events, causing performance degradation.

Root Cause: Component Type Switching

The current implementation conditionally renders different component types:

{table.getState().columnSizingInfo.isResizingColumn && enableMemo ? (
  <MemoizedTableBody table={table} />  // Different component type
) : (
  <TableBody table={table} />          // Different component type
)}

React's Reconciliation Behavior:

• Different component types → React remounts (destroys + recreates DOM)
• Same component type → React reconciles (updates existing DOM)

Since MemoizedTableBody and TableBody are different component types, React cannot reconcile between them and must remount the entire table body on every resize start/end.

Performance Impact

Mouse Down/Up Events Trigger:

1. Complete component unmounting (DOM destruction)
2. Full component remounting (DOM recreation)

Result: Laggy mouse interactions that defeat the "performant" example's purpose.

Solution: Enable Reconciliation

Use a single stable component type that React can reconcile:

// Always same component type - React can reconcile
<StableMemoizedTableBody table={table} />

export const StableMemoizedTableBody = React.memo(TableBody, (prev, next) =>
  next.table.getState().columnSizingInfo.isResizingColumn
    ? prev.table.options.data === next.table.options.data
    : false
) as typeof TableBody;

Benefits

• React reconciles instead of remounting
• Instant mouse events with no DOM recreation overhead
• Preserved component state and DOM references
• Same performance optimization during resize (memo still works)

You can play with both options in my reproduction by checking and unchecking Stable Table Body Component

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/youthful-bardeen-nvmsn7

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.