dev: enforce React hooks rules in ESLint

mbta · Aug 20, 2024 · 08472a2 · 08472a2
1 parent 7640851
commit 08472a2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/assets/eslint.config.mjs b/assets/eslint.config.mjs
@@ -2,6 +2,7 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReactHooks from "eslint-plugin-react-hooks";
 import eslintConfigPrettier from "eslint-config-prettier";
 import jestPlugin from "eslint-plugin-jest";
 
@@ -15,6 +16,16 @@ export default [
     files: ["test/**"],
     ...jestPlugin.configs["flat/style"],
   },
+  {
+    files: ["**/*.{ts, tsx}"],
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      "react-hooks/exhaustive-deps": "error",
+    },
+  },
   {
     settings: { react: { version: "detect" } },
     rules: {

diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -61,6 +61,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "exit_on_eof": "^1.0.4",
     "file-loader": "^6.2.0",
     "fishery": "^2.2.2",

diff --git a/assets/src/hooks/v2/use_refresh_rate.ts b/assets/src/hooks/v2/use_refresh_rate.ts
@@ -11,27 +11,28 @@ interface RefreshRateConfig {
 
 const useRefreshRate = (): RefreshRateConfig => {
   const screenId = useScreenID();
-  // Live OFM screens ignore any configured refreshRate.
-  // Hardcoding to 0 prevents an interval from being started unnecessarily.
-  const refreshRate = isOFM() ? "0" : fetchDatasetValue("refreshRate");
-  const refreshRateOffset = getDatasetValue("refreshRateOffset") || "0";
-  const screenIdsWithOffsetMap = getDatasetValue("screenIdsWithOffsetMap");
 
-  const refreshRateMs = parseFloat(refreshRate) * 1000;
+  return useMemo(() => {
+    // Live OFM screens ignore any configured refreshRate.
+    // Hardcoding to 0 prevents an interval from being started unnecessarily.
+    const refreshRate = isOFM() ? "0" : fetchDatasetValue("refreshRate");
+    const refreshRateOffset = getDatasetValue("refreshRateOffset") || "0";
+    const screenIdsWithOffsetMap = getDatasetValue("screenIdsWithOffsetMap");
+
+    const refreshRateMs = parseFloat(refreshRate) * 1000;
+
+    let refreshRateOffsetMs;
 
-  const refreshRateOffsetMs = useMemo(() => {
     if (screenIdsWithOffsetMap) {
       const screens = JSON.parse(screenIdsWithOffsetMap);
-      return _.find(screens, { id: screenId }).refresh_rate_offset * 1000;
+      refreshRateOffsetMs =
+        _.find(screens, { id: screenId }).refresh_rate_offset * 1000;
+    } else {
+      refreshRateOffsetMs = parseFloat(refreshRateOffset) * 1000;
     }
 
-    return parseFloat(refreshRateOffset) * 1000;
-  }, []);
-
-  return {
-    refreshRateMs,
-    refreshRateOffsetMs,
-  };
+    return { refreshRateMs, refreshRateOffsetMs };
+  }, [screenId]);
 };
 
 export default useRefreshRate;