check hooks rules with eslint + fix missing dependencies

note that we need to use useCallback for setColumnWidth and
setColumnWidths, because otherwise the functions are recreated on every
render, which reruns the useEffects inside TableHeader.tsx

Author: severo

eslint.config.js

@@ -1,6 +1,7 @@
 import javascript from '@eslint/js'
 import typescriptParser from '@typescript-eslint/parser'
 import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
 import globals from 'globals'
 import typescript from 'typescript-eslint'
 
@@ -11,7 +12,8 @@ export default [
   {
     files: ['**/*.ts', '**/*.tsx'],
     plugins: {
-      react,
+      react,      
+      'react-hooks': reactHooks,
       typescript,
     },
 
@@ -38,6 +40,7 @@ export default [
     rules: {
       ...javascript.configs.recommended.rules,
       ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
       ...typescript.configs.eslintRecommended.rules,
       ...typescript.configs.recommended.rules,
       'arrow-spacing': 'error',

package.json

@@ -46,7 +46,8 @@
     "@types/react-dom": "18.3.1",
     "@vitest/coverage-v8": "2.1.8",
     "eslint": "9.18.0",
-    "eslint-plugin-react": "7.37.3",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.1.0",
     "jsdom": "26.0.0",
     "tslib": "2.8.1",
     "typescript": "5.7.3",

src/HighTable.tsx

@@ -336,7 +336,15 @@ export default function HighTable({
       // did not throw: we can set the anchor
       dispatch({ type: 'SET_SELECTION', selection: newSelection, anchor: tableIndex })
     }
-  }, [selection, anchor])
+  }, [selection, anchor, selectable])
+
+  const setColumnWidths = useCallback((columnWidths: Array<number | undefined>) => {
+    dispatch({ type: 'SET_COLUMN_WIDTHS', columnWidths })
+  }, [])
+
+  const setColumnWidth = useCallback((columnIndex: number, columnWidth: number | undefined) => {
+    dispatch({ type: 'SET_COLUMN_WIDTH', columnIndex, columnWidth })
+  }, [])
 
   // add empty pre and post rows to fill the viewport
   const prePadding = Array.from({ length: Math.min(padding, startIndex) }, () => [])
@@ -369,8 +377,8 @@ export default function HighTable({
             dataReady={hasCompleteRow}
             header={data.header}
             orderBy={orderBy}
-            setColumnWidth={(columnIndex, columnWidth) => dispatch({ type: 'SET_COLUMN_WIDTH', columnIndex, columnWidth })}
-            setColumnWidths={columnWidths => dispatch({ type: 'SET_COLUMN_WIDTHS', columnWidths })}
+            setColumnWidth={setColumnWidth}
+            setColumnWidths={setColumnWidths}
             setOrderBy={orderBy => data.sortable && dispatch({ type: 'SET_ORDER', orderBy })} />
           <tbody>
             {prePadding.map((_, prePaddingIndex) => {

src/TableHeader.tsx

@@ -60,15 +60,15 @@ export default function TableHeader({
       })
     }
     setColumnWidths(userWidths)
-  }, [cacheKey])
+  }, [cacheKey, header, setColumnWidths])
 
   // Measure default column widths when data is ready
   useEffect(() => {
     if (dataReady) {
       const widths = headerRefs.current.map(measureWidth)
       setColumnWidths(widths)
     }
-  }, [cacheKey, dataReady, header]) // re-measure if header changes
+  }, [cacheKey, dataReady, header, setColumnWidths]) // re-measure if header changes
 
   // Modify column width
   function startResizing(columnIndex: number, e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
@@ -130,7 +130,7 @@ export default function TableHeader({
       window.removeEventListener('mousemove', handleMouseMove)
       window.removeEventListener('mouseup', stopResizing)
     }
-  }, [cacheKey, header, resizing, setColumnWidths])
+  }, [cacheKey, header, resizing, setColumnWidths, columnWidths, setColumnWidth])
 
   // Function to handle click for changing orderBy
   function handleOrderByClick(columnHeader: string, e: React.MouseEvent) {