improve column resizing performance by caching column defs

apps/material-react-table-docs/pages/docs/api/mrt-hooks.mdx

@@ -76,13 +76,7 @@ const table = useMRT_TableInstance({
 });
 ```
 
-This hook also uses the [`useMRT_DisplayColumns`](#usemrt_displaycolumns) and [`useMRT_Effects`](#usemrt_effects) to generate the built-in display columns (row numbers, actions, selection, etc) and house some extra useEffect hooks needed by some MRT features on a table wide level.
-
-### useMRT_DisplayColumns
-
-[Source Code](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx)
-
-This hook is responsible for generating the built-in display columns (row numbers, actions, selection, etc) and adding them to the table instance's columns array, alongside your own defined columns.
+This hook also uses the [`useMRT_Effects`](#usemrt_effects)
 
 ### useMRT_Effects
 
@@ -121,7 +115,10 @@ return rows.map((row) => {
 This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more.
 
 ```tsx
-import { useMaterialReactTable, useMRT_ColumnVirtualizer } from 'material-react-table';
+import {
+  useMaterialReactTable,
+  useMRT_ColumnVirtualizer,
+} from 'material-react-table';
 
 const table = useMaterialReactTable({
   ...options,
@@ -141,7 +138,10 @@ You would only need to use this hook if you are writing a custom headless table
 This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more.
 
 ```tsx
-import { useMaterialReactTable, useMRT_RowVirtualizer } from 'material-react-table';
+import {
+  useMaterialReactTable,
+  useMRT_RowVirtualizer,
+} from 'material-react-table';
 
 const table = useMaterialReactTable({
   ...options,
@@ -150,4 +150,4 @@ const table = useMaterialReactTable({
 const rowVirtualizer = useMRT_RowVirtualizer(table);
 ```
 
-You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
+You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.

packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx

@@ -14,7 +14,6 @@ import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
 export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData>[] => {
-  console.log('useMRT_DisplayColumns');
   return [
     getMRT_RowNumbersColumnDef(tableOptions),
     getMRT_RowSelectColumnDef(tableOptions),

packages/material-react-table/src/hooks/useMRT_TableInstance.ts

@@ -93,14 +93,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   );
   const [columnSizingInfo, onColumnSizingInfoChange] =
     useState<MRT_ColumnSizingInfoState>(
-      initialState.columnSizingInfo ?? {
-        columnSizingStart: [],
-        deltaOffset: null,
-        deltaPercentage: null,
-        isResizingColumn: false,
-        startOffset: null,
-        startSize: null,
-      },
+      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
     );
   const [density, setDensity] = useState<MRT_DensityState>(
     initialState?.density ?? 'comfortable',
@@ -172,15 +165,18 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
 
   const tableOptions = _tableOptions as MRT_StatefulTableOptions<TData>;
 
-  tableOptions.columns = prepareColumns({
-    columnDefs: [
-      ...getMRT_DisplayColumns(tableOptions),
-      ...tableOptions.columns,
-    ],
-    tableOptions,
-  });
-
-  console.log('create column defs');
+  //don't recompute columnDefs while resizing column.
+  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  tableOptions.columns = tableOptions.state.columnSizingInfo.isResizingColumn
+    ? columnDefsRef.current
+    : prepareColumns({
+        columnDefs: [
+          ...getMRT_DisplayColumns(tableOptions),
+          ...tableOptions.columns,
+        ],
+        tableOptions,
+      });
+  columnDefsRef.current = tableOptions.columns;
 
   tableOptions.data = useMemo(
     () =>

packages/material-react-table/src/types.ts

@@ -344,6 +344,7 @@ export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
       MRT_TableState<TData>,
       | 'columnFilterFns'
       | 'columnOrder'
+      | 'columnSizingInfo'
       | 'creatingRow'
       | 'density'
       | 'draggingColumn'