Add eslint-plugin-react-hooks.

This also fixes a few warnings in DragGroup.js.

.eslintrc.json

@@ -6,7 +6,11 @@
     "shared-node-browser": true,
     "jest": true
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

package.json

@@ -37,6 +37,7 @@
     "css-loader": "^6.6.0",
     "eslint": "^8.11.0",
     "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "prettier": "^2.6.0",
     "style-loader": "^3.3.1",

src/components/DragGroup.js

@@ -14,28 +14,29 @@ export default function DragGroup({ dispatchGameState, gameState }) {
   // Capture the pointer. If the pointer could not be captured successfully, end the drag.
   const dragGroup = React.useRef(null);
   React.useEffect(() => {
+    const element = dragGroup.current;
     let ok = true;
     try {
-      dragGroup.current.setPointerCapture(dragState.pointerID);
+      element.setPointerCapture(dragState.pointerID);
     } catch (exc) {
       console.warn("Failed to capture pointer:", exc);
       ok = false;
     }
-    ok &&= dragGroup.current.hasPointerCapture(dragState.pointerID);
+    ok &&= element.hasPointerCapture(dragState.pointerID);
     if (!ok) {
       dispatchGameState({ action: "dragEnd" });
     }
     // Cleanup function to release the pointer.
     return () => {
-      if (ok && dragGroup.current) {
+      if (ok) {
         try {
-          dragGroup.current.releasePointerCapture(dragState.pointerID);
+          element.releasePointerCapture(dragState.pointerID);
         } catch (exc) {
           // The pointer is invalid. Normal on touch screens. Ignore it.
         }
       }
     };
-  }, [dragState.pointerID]);
+  }, [dragState.pointerID, dispatchGameState]);
 
   // Multi-select timer.
   React.useEffect(() => {
@@ -59,7 +60,7 @@ export default function DragGroup({ dispatchGameState, gameState }) {
         clearTimeout(timerID);
       }
     };
-  }, [isShifting, dragState.destination.where, dragState.dragHasMoved]);
+  }, [isShifting, dragState.destination.where, dragState.dragHasMoved, dispatchGameState]);
 
   // Compute location.
   let top = dragState.pointer.y - dragState.pointerOffset.y;