Great question—this is a super common pain point with large data tables in React, and there are tried-and-true patterns to fix it while keeping your implementation scalable for generic DataTables. Let’s break down the core issues and standard solutions:

Core Problem Recap #

When you manage selected rows with a single selectedIds Set, any change (even a single row toggle) creates a new Set reference. If your row components receive this Set as a prop, even with React.memo, every row will re-render because the prop reference changed. For bulk actions like "select all," this becomes a performance bottleneck since every row has to update its checkbox state.

Standard React Solutions for Generic DataTables #

1. Split Selection State to Reduce Prop Dependencies #

Instead of a single selectedIds Set, split your selection state into two separate pieces:

• A boolean isSelectAll flag to track bulk selection
• A selectedIds Set (or unselectedIds Set, depending on your logic) to track individual row overrides

This lets you compute a row’s selected state without passing the entire selectedIds Set to every row. For example:

// Parent component state
const [isSelectAll, setIsSelectAll] = useState(false);
const [selectedIds, setSelectedIds] = useState(new Set());

// For a given row id, compute selection state
const isRowSelected = isSelectAll ? true : selectedIds.has(id);

2. Use Context to Avoid Prop Drilling & Stabilize Props #

Instead of passing selection state through every row component (which forces re-renders when state changes), create a dedicated TableSelectionContext to share selection state and handlers only with components that need them (like checkbox cells). This keeps your row components’ props stable, so React.memo works as intended.

Example implementation:

// Create the context
const TableSelectionContext = React.createContext();

// Provider component to wrap your table
export function TableSelectionProvider({ children, data }) {
  const [isSelectAll, setIsSelectAll] = useState(false);
  const [selectedIds, setSelectedIds] = useState(new Set());

  // Memoize handlers to keep references stable
  const toggleRow = useCallback((id) => {
    setSelectedIds(prev => {
      const newSet = new Set(prev);
      newSet.has(id) ? newSet.delete(id) : newSet.add(id);
      // Disable select-all if a row is toggled while select-all is active
      if (isSelectAll) setIsSelectAll(false);
      return newSet;
    });
  }, [isSelectAll]);

  const toggleAll = useCallback(() => {
    setIsSelectAll(prev => !prev);
    setSelectedIds(prev => !prev ? new Set() : new Set(data.map(item => item.id)));
  }, [data]);

  return (
    <TableSelectionContext.Provider
      value={{ isSelectAll, selectedIds, toggleRow, toggleAll }}
    >
      {children}
    </TableSelectionContext.Provider>
  );
}

3. Memoize Components at the Right Level #

You don’t necessarily need to memoize individual cells unless your rows have heavy content. Here’s how to structure components for maximum efficiency:

• Row Component: Use React.memo on the entire row, but only pass stable props (like row data, not selection state). The row’s job is to render content and the checkbox cell—no selection logic here.
• Checkbox Cell Component: Extract the checkbox into its own memoized component that consumes the selection context directly. This way, only the checkbox re-renders when selection state changes, not the entire row.

Example components:

// Memoized row component (stable props = no unnecessary re-renders)
const TableRow = React.memo(({ rowData, children }) => (
  <tr>
    <TableCheckboxCell id={rowData.id} />
    {children}
  </tr>
));

// Memoized checkbox cell (only re-renders when selection state affects this row)
const TableCheckboxCell = React.memo(({ id }) => {
  const { isSelectAll, selectedIds, toggleRow } = useContext(TableSelectionContext);
  const isSelected = isSelectAll ? true : selectedIds.has(id);

  return (
    <td>
      <input
        type="checkbox"
        checked={isSelected}
        onChange={() => toggleRow(id)}
      />
    </td>
  );
});

4. Add Virtualization for Extreme Scale #

For tables with thousands of rows, even optimized re-renders can be slow. Pair the above patterns with virtual scrolling (using libraries like react-window or react-virtualized). Virtualization only renders rows that are visible in the viewport, so bulk actions like "select all" only trigger re-renders for visible rows, not every row in the table.

Key Takeaways for Generic DataTables #

• Decouple selection state from row props: Use context to avoid passing unstable state references to every row.
• Split state to reduce re-render scope: Separate bulk select flags from individual row selections to minimize unnecessary updates.
• Memoize strategically: Focus memoization on components that actually depend on selection state (checkbox cells) and keep row props stable.
• Virtualize for large datasets: This is non-negotiable for tables with thousands of rows.

内容的提问来源于stack exchange，提问作者Limon