Optimizing Performance for Dynamic Column Visibility

Showcase techniques for optimizing React TanStack Table's performance when handling dynamic column visibility, including memoization and lazy loading strategies.
const [visibleColumns, setVisibleColumns] = React.useState(initialVisibleColumns);
Initialize state for managing visible columns. 'initialVisibleColumns' should be an array of the IDs of the columns that are initially visible.
const memoizedColumnVisibility = React.useMemo(() => {
  return => ({
    isVisible: visibleColumns.includes(
}, [columns, visibleColumns]);
Use memoization to prevent unnecessary re-renders. This creates a new columns array only when 'columns' or 'visibleColumns' changes, enhancing performance.
const toggleColumnVisibility = (columnId) => {
  setVisibleColumns(currentVisibleColumns => {
    return currentVisibleColumns.includes(columnId)
      ? currentVisibleColumns.filter(id => id !== columnId)
      : [...currentVisibleColumns, columnId];
Function to toggle the visibility of a column by its ID. It updates the 'visibleColumns' state, adding or removing the column ID based on its current visibility.