Fixed half of the linting warnings

client/eslint.config.mjs

@@ -120,9 +120,6 @@ const overrideConfig = defineConfig([
       "prettier/prettier": ["error", {
         endOfLine: "auto",
       }],
-
-      // TODO: remove this and fix errors (the joy of tech debt amirite)
-      "react-hooks/exhaustive-deps": "warn",
     },
   }
 ])

client/src/App.tsx

@@ -19,7 +19,7 @@ const App = () => {
     window.globalStore = useGlobalStore;
     // @ts-ignore
     window.frontendStore = useFrontendStateStore;
-  }, [useGlobalStore]);
+  }, []);
 
   return (
     <Box color={structsTheme.palette.text.primary}>

client/src/Services/useSocketCommunication.ts

@@ -45,7 +45,15 @@ export const useSocketCommunication = () => {
     });
 
     socketClient.setupEventHandlers(handlers);
-  }, [socketClient]);
+  }, [
+    socketClient,
+    setActive,
+    updateNextFrame,
+    updateTypeDeclaration,
+    appendConsoleChunks,
+    updateCurrFocusedTab,
+    setToastMessage,
+  ]);
 
   // reset entire debuggin session
   const resetDebugSession = useCallback(() => {
@@ -64,15 +72,6 @@ export const useSocketCommunication = () => {
     resetConsoleChunks,
   ]);
 
-  // error handler for sending code
-  const handleSendCodeError = () => {
-    setToastMessage({
-      content: 'No file being selected',
-      colorTheme: 'warning',
-      durationMs: DEFAULT_MESSAGE_DURATION,
-    });
-  };
-
   // send code to backend to start debugging session
   const sendCode = useCallback(() => {
     if (!socketClient) return;
@@ -83,40 +82,44 @@ export const useSocketCommunication = () => {
     const file = fileSystem.getFileFromPath(currFocusFilePath);
 
     if (!file || file.path === 'root') {
-      handleSendCodeError();
+      setToastMessage({
+        content: 'No file being selected',
+        colorTheme: 'warning',
+        durationMs: DEFAULT_MESSAGE_DURATION,
+      });
       return;
     }
 
     socketClient.serverAction.initializeDebugSession(file.data);
-  }, [socketClient, resetDebugSession]);
+  }, [socketClient, resetDebugSession, setToastMessage]);
 
   // add event listener with timeout
-  const addEventListenerWithTimeout = (
-    listener: (state: BackendState | null) => void,
-    timeout: number
-  ) => {
-    if (!socketClient) return;
-
-    let resolved = false;
-
-    const wrappedListener = (state: BackendState) => {
-      if (!resolved) {
-        resolved = true;
-        listener(state);
-        socketClient.socket.off('sendBackendStateToUser', wrappedListener);
-      }
-    };
-
-    socketClient.socket.on('sendBackendStateToUser', wrappedListener);
-
-    setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        listener(null);
-        socketClient.socket.off('sendBackendStateToUser', wrappedListener);
-      }
-    }, timeout);
-  };
+  const addEventListenerWithTimeout = useCallback(
+    (listener: (state: BackendState | null) => void, timeout: number) => {
+      if (!socketClient) return;
+
+      let resolved = false;
+
+      const wrappedListener = (state: BackendState) => {
+        if (!resolved) {
+          resolved = true;
+          listener(state);
+          socketClient.socket.off('sendBackendStateToUser', wrappedListener);
+        }
+      };
+
+      socketClient.socket.on('sendBackendStateToUser', wrappedListener);
+
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          listener(null);
+          socketClient.socket.off('sendBackendStateToUser', wrappedListener);
+        }
+      }, timeout);
+    },
+    [socketClient]
+  );
 
   // step debugger and wait for backend to respond
   const executeNextWithRetry = useCallback(() => {
@@ -133,7 +136,7 @@ export const useSocketCommunication = () => {
           socketClient.serverAction.executeNext();
         })
     );
-  }, [socketClient, queue]);
+  }, [socketClient, queue, addEventListenerWithTimeout]);
 
   // to call multiple next states in bulk
   const bulkSendNextStates = useCallback(

client/src/components/Navbars/DevelopmentModeNavbar.tsx

@@ -7,7 +7,6 @@ import AboutText from '@/visualiser-debugger/Component/FileTree/AboutText';
 import BookIcon from '@mui/icons-material/Book';
 import classNames from 'classnames';
 import { Tooltip } from '@mui/material';
-import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
@@ -18,15 +17,8 @@ const DevelopmentModeNavbar = ({
 }: {
   onButtonClick: (event: React.MouseEvent<HTMLElement>) => void;
 }) => {
-  const [navigateHomePage, setNavigateHomePage] = useState(false);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (navigateHomePage) {
-      navigate('/');
-    }
-  }, [navigateHomePage]);
-
   const { darkMode, toggleDarkMode } = useTheme();
   const handleDarkModeToggle = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
@@ -35,11 +27,7 @@ const DevelopmentModeNavbar = ({
 
   return (
     <div className={styles.navBar}>
-      <div
-        className={styles.navItem}
-        onClick={() => setNavigateHomePage(!navigateHomePage)}
-        aria-hidden="true"
-      >
+      <div className={styles.navItem} onClick={() => navigate('/')} aria-hidden="true">
         <img src={logo} alt="logo" height="30px" />
         <span>
           <h4>Structs.sh</h4>

client/src/components/Visualiser/VisualiserInterface/Controls.tsx

@@ -93,33 +93,33 @@ const VisualiserControls = ({
   const handlePlay = useCallback(() => {
     controller.play();
     handleUpdateIsPlaying(true);
-  }, [controller]);
+  }, [controller, handleUpdateIsPlaying]);
 
   const handlePause = useCallback(() => {
     controller.pause();
     handleUpdateIsPlaying(false);
-  }, [controller]);
+  }, [controller, handleUpdateIsPlaying]);
 
   const handleReplay = useCallback(() => {
     controller.seekPercent(0);
     handlePlay();
-  }, [controller]);
+  }, [controller, handlePlay]);
 
   const handleStepForward = useCallback(() => {
     controller.stepForwards();
     // Stepforward pauses when animation is complete, so set state of isPlaying to false
     handleUpdateIsPlaying(false);
-  }, [controller, isPlaying]);
+  }, [controller, handleUpdateIsPlaying]);
 
   const handleStepBackward = useCallback(() => {
     handlePause();
     controller.stepBackwards();
-  }, [controller]);
+  }, [controller, handlePause]);
 
   const handleFastRewind = useCallback(() => {
     handlePause();
     controller.seekPercent(0);
-  }, [controller]);
+  }, [controller, handlePause]);
 
   const handleFastForward = useCallback(() => {
     controller.seekPercent(100);

client/src/components/Visualiser/VisualiserInterface/VisualiserInterface.tsx

@@ -40,7 +40,7 @@ const VisualiserInterface: FC<VisualiserInterfaceProps> = ({ topicTitle, data })
     if (data) {
       controller.loadData(data);
     }
-  }, [topicTitle]);
+  }, [topicTitle, data]);
 
   const handleTimelineUpdate = useCallback((val: number) => {
     const timelineSlider = document.querySelector('#timelineSlider') as HTMLInputElement;
@@ -65,7 +65,7 @@ const VisualiserInterface: FC<VisualiserInterfaceProps> = ({ topicTitle, data })
     setIsPlaying(val);
   }, []);
 
-  const contextValue = useMemo(() => ({ controller }), [controller]);
+  const contextValue = useMemo(() => ({ controller }), []);
 
   return (
     <VisualiserContext.Provider value={contextValue}>