react-hooks eslint

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:typescript-sort-keys/recommended',
+    'plugin:react-hooks/recommended',
   ],
   globals: {
     browser: true,

package-lock.json

@@ -71,6 +71,7 @@
         "eslint-plugin-jest-dom": "^4.0.3",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.32.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-sort-keys-fix": "^1.1.2",
         "eslint-plugin-testing-library": "^5.9.1",
         "eslint-plugin-typescript-sort-keys": "^2.1.0",
@@ -9693,10 +9694,11 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -30036,9 +30038,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
       "requires": {}
     },

package.json

@@ -92,6 +92,7 @@
     "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-testing-library": "^5.9.1",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",

src/components/Options.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import config, { SuccessOrFailType } from '../config/config';
 import apiKeyInvalid from '../utils/apiKey';
 import { IS_CHROME } from '../utils/operatingSystem';
@@ -33,17 +33,17 @@ export default function Options(): JSX.Element {
 
   const loggingStyleRef = useRef(null);
 
-  const restoreSettings = async (): Promise<void> => {
+  const restoreSettings = useCallback(async (): Promise<void> => {
     const settings = await getSettings();
     setState({
       ...state,
       ...settings,
     });
-  };
+  }, [state]);
 
   useEffect(() => {
     void restoreSettings();
-  }, []);
+  }, [restoreSettings]);
 
   const handleSubmit = async () => {
     if (state.loading) return;
@@ -72,19 +72,25 @@ export default function Options(): JSX.Element {
     }
   };
 
-  const updateDenyListState = (sites: string) => {
-    setState({
-      ...state,
-      denyList: sites.trim().split('\n'),
-    });
-  };
+  const updateDenyListState = useCallback(
+    (sites: string) => {
+      setState({
+        ...state,
+        denyList: sites.trim().split('\n'),
+      });
+    },
+    [state],
+  );
 
-  const updateAllowListState = (sites: string) => {
-    setState({
-      ...state,
-      allowList: sites.trim().split('\n'),
-    });
-  };
+  const updateAllowListState = useCallback(
+    (sites: string) => {
+      setState({
+        ...state,
+        allowList: sites.trim().split('\n'),
+      });
+    },
+    [state],
+  );
 
   const updateLoggingStyle = (style: string) => {
     setState({
@@ -111,7 +117,7 @@ export default function Options(): JSX.Element {
     setState({ ...state, trackSocialMedia: !state.trackSocialMedia });
   };
 
-  const loggingStyle = function () {
+  const loggingStyle = useCallback(() => {
     // TODO: rewrite SitesList to be structured inputs instead of textarea
 
     if (state.loggingStyle == 'deny') {
@@ -133,7 +139,13 @@ export default function Options(): JSX.Element {
         helpText="Only track these sites. You can assign URL to project by adding @@YourProject at the end of line."
       />
     );
-  };
+  }, [
+    state.allowList,
+    state.denyList,
+    state.loggingStyle,
+    updateAllowListState,
+    updateDenyListState,
+  ]);
 
   const isApiKeyValid = apiKeyInvalid(state.apiKey) === '';
 

src/components/WakaTime.tsx

@@ -21,10 +21,16 @@ export default function WakaTime(): JSX.Element {
   useEffect(() => {
     const fetchData = async () => {
       await fetchUserData(apiKeyFromRedux, dispatch);
+    };
+    void fetchData();
+  }, [apiKeyFromRedux, dispatch]);
+
+  useEffect(() => {
+    const init = async () => {
       const items = await browser.storage.sync.get({ extensionStatus: '' });
       setExtensionStatus(items.extensionStatus as string);
     };
-    void fetchData();
+    void init();
   }, []);
 
   const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';

src/core/WakaTimeCore.ts

@@ -147,6 +147,7 @@ class WakaTimeCore {
       branch: heartbeat?.branch ?? '<<LAST_BRANCH>>',
       category: heartbeat?.category,
       entity: heartbeat?.entity ?? entity,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
       id: uuid4(),
       language: heartbeat?.language,
       plugin: heartbeat?.plugin,