React hook linter

.eslintrc.json

@@ -1,6 +1,9 @@
 {
     "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint/eslint-plugin"],
+    "plugins": [
+        "@typescript-eslint/eslint-plugin",
+        "react-hooks"
+    ],
     "rules": {
         "indent": [
             "error",
@@ -69,7 +72,9 @@
                 ]
             }
         ],
-        "@typescript-eslint/require-await": ["error"]
+        "@typescript-eslint/require-await": ["error"],
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "error"
     },
     "env": {
         "builtin": true,

js/components/Apple2.tsx

@@ -59,7 +59,7 @@ export const Apple2 = (props: Apple2Props) => {
                 apple2.run();
             }).catch(error => console.error(error));
         }
-    }, []);
+    }, [props]);
 
     return (
         <div className={cs('outer', { apple2e: e})}>

js/components/AudioControl.tsx

@@ -32,13 +32,13 @@ export const AudioControl = ({ apple2 }: AudioControlProps) => {
             setAudio(audio);
             setAudioEnabled(audio.isEnabled());
         }
-    }, [apple2]);
+    }, [apple2, options]);
 
     const doToggleSound = useCallback(() => {
         const on = !audio?.isEnabled();
         options.setOption(SOUND_ENABLED_OPTION, on);
         setAudioEnabled(on);
-    }, [audio]);
+    }, [audio, options]);
 
     return (
         <ControlButton

js/components/ControlStrip.tsx

@@ -47,7 +47,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => {
             const screen = new Screen(vm);
             options.addOptions(screen);
         }
-    }, [apple2]);
+    }, [apple2, e, options]);
 
     const doReset = useCallback(() =>
         apple2?.reset()
@@ -70,7 +70,7 @@ export const ControlStrip = ({ apple2, e }: ControlStripProps) => {
             SCREEN_FULL_PAGE,
             !options.getOption(SCREEN_FULL_PAGE)
         )
-    , []);
+    , [options]);
 
     useHotKey('F2', doToggleFullPage);
     useHotKey('F4', doShowOptions);

js/components/DiskII.tsx

@@ -56,7 +56,7 @@ export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => {
                     );
             }
         }
-    }, [disk2]);
+    }, [disk2, number]);
 
     const doClose = useCallback(() => {
         setModalOpen(false);

js/components/Drives.tsx

@@ -54,7 +54,7 @@ export const Drives = ({ io, sectors }: DrivesProps) => {
             io.setSlot(6, disk2);
             setDisk2(disk2);
         }
-    }, [io]);
+    }, [io, sectors]);
 
     return (
         <>

js/components/FileChooser.tsx

@@ -55,7 +55,7 @@ const InputFileChooser = ({
                 onChange(newFiles);
             }
         }
-    }, []);
+    }, [onChange]);
 
     const extraProps = useMemo<ExtraProps>(() => {
         // Accept all of the given MIME types and extensions. An argument
@@ -131,14 +131,14 @@ const FilePickerChooser = ({
         } finally {
             setBusy(false);
         }
-    }, []);
+    }, [accept, busy, onChange]);
 
     useEffect(() => {
         setSelectedFilename(
             fileHandlesRef.current?.length
                 ? fileHandlesRef.current[0].name
                 : 'No file selected');
-    }, [fileHandlesRef.current]);
+    }, []);
 
     return (
         <>
@@ -184,7 +184,7 @@ export const FileChooser = ({
             });
         }
         onChange(handles);
-    }, []);
+    }, [onChange]);
 
     const onChangeForPicker = useCallback((fileHandles: FileSystemFileHandle[]) => {
         const handles: FileSystemFileHandleLike[] = [];
@@ -198,7 +198,7 @@ export const FileChooser = ({
             });
         }
         onChange(handles);
-    }, []);
+    }, [onChange]);
 
     return control === 'picker'
         ? (

js/components/FileModal.tsx

@@ -50,7 +50,7 @@ export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) =>
     const [handles, setHandles] = useState<FileSystemFileHandleLike[]>();
     const [filename, setFilename] = useState<string>();
 
-    const doCancel = useCallback(() => onClose(true), []);
+    const doCancel = useCallback(() => onClose(true), [onClose]);
 
     const doOpen = useCallback(async () => {
         const hashParts = getHashParts();

js/components/Mouse.tsx

@@ -31,7 +31,7 @@ export const Mouse = ({ cpu, screen, io, slot }: MouseProps) => {
             const mouse = new MouseCard(cpu, mouseUI);
             io.setSlot(slot, mouse);
         }
-    }, [cpu, io]);
+    }, [cpu, io, screen, slot]);
 
     return null;
 };

js/components/Slinky.tsx

@@ -24,7 +24,7 @@ export const Slinky = ({ io, slot }: SlinkyProps) => {
             const slinky = new RAMFactor(1024 * 1024);
             io.setSlot(slot, slinky);
         }
-    }, [io]);
+    }, [io, slot]);
 
     return null;
 };

js/components/ThunderClock.tsx

@@ -22,7 +22,7 @@ export const ThunderClock = ({ io, slot }: ThunderClockProps) => {
             const clock = new ThunderClockCard();
             io.setSlot(slot, clock);
         }
-    }, [io]);
+    }, [io, slot]);
 
     return null;
 };

package-lock.json

@@ -32,6 +32,7 @@
         "babel-jest": "^27.2.4",
         "canvas": "^2.8.0",
         "eslint": "^8.15.0",
+        "eslint-plugin-react-hooks": "^4.5.0",
         "file-loader": "^6.0.0",
         "jest": "^27.2.4",
         "jest-image-snapshot": "^4.5.1",
@@ -5563,6 +5564,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -18231,6 +18244,13 @@
         }
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

package.json

@@ -41,6 +41,7 @@
     "babel-jest": "^27.2.4",
     "canvas": "^2.8.0",
     "eslint": "^8.15.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^6.0.0",
     "jest": "^27.2.4",
     "jest-image-snapshot": "^4.5.1",