refactor: Optimize React hook dependencies by using getState() for immutable Zustand store actions (fixes #299); Remove unused setters from logFileStore. (#334)

Henry8192 · web-flow · commit 07cf097fae58 · 2025-06-26T20:12:05.000-04:00
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx
@@ -1,4 +1,7 @@
-import {Ref} from "react";
+import {
+    Ref,
+    useCallback,
+} from "react";
 
 import {
     TabList,
@@ -48,8 +51,8 @@ interface SidebarTabsProps {
  */
 const SidebarTabs = ({ref}: SidebarTabsProps) => {
     const activeTabName = useUiStore((state) => state.activeTabName);
-    const setActiveTabName = useUiStore((state) => state.setActiveTabName);
-    const handleTabButtonClick = (tabName: TAB_NAME) => {
+
+    const handleTabButtonClick = useCallback((tabName: TAB_NAME) => {
         switch (tabName) {
             case TAB_NAME.DOCUMENTATION:
                 openInNewTab(DOCUMENTATION_URL);
@@ -58,11 +61,11 @@ const SidebarTabs = ({ref}: SidebarTabsProps) => {
                 const newTabName = (activeTabName === tabName) ?
                     TAB_NAME.NONE :
                     tabName;
-
+                const {setActiveTabName} = useUiStore.getState();
                 setActiveTabName(newTabName);
             }
         }
-    };
+    }, [activeTabName]);
 
     return (
         <Tabs
diff --git a/src/components/CentralContainer/Sidebar/index.tsx b/src/components/CentralContainer/Sidebar/index.tsx
@@ -46,14 +46,14 @@ const setPanelWidth = (newValue: number) => {
  */
 const Sidebar = () => {
     const activeTabName = useUiStore((state) => state.activeTabName);
-    const setActiveTabName = useUiStore((state) => state.setActiveTabName);
     const tabListRef = useRef<HTMLDivElement>(null);
 
     const handleResizeHandleRelease = useCallback(() => {
         if (getPanelWidth() === tabListRef.current?.clientWidth) {
+            const {setActiveTabName} = useUiStore.getState();
             setActiveTabName(TAB_NAME.NONE);
         }
-    }, [setActiveTabName]);
+    }, []);
 
     const handleResize = useCallback((resizeHandlePosition: number) => {
         if (null === tabListRef.current) {
diff --git a/src/components/DropFileContainer/index.tsx b/src/components/DropFileContainer/index.tsx
@@ -1,4 +1,7 @@
-import React, {useState} from "react";
+import React, {
+    useCallback,
+    useState,
+} from "react";
 
 import useLogFileStore from "../../stores/logFileStore";
 import useUiStore from "../../stores/uiStore";
@@ -21,12 +24,11 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const loadFile = useLogFileStore((state) => state.loadFile);
     const uiState = useUiStore((state) => state.uiState);
     const [isFileHovering, setIsFileHovering] = useState(false);
     const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
 
-    const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
+    const handleDrag = useCallback((ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -47,9 +49,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
 
             setIsFileHovering(false);
         }
-    };
+    }, []);
 
-    const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
+    const handleDrop = useCallback((ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -64,8 +66,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
 
             return;
         }
+        const {loadFile} = useLogFileStore.getState();
         loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
-    };
+    }, [disabled]);
 
     return (
         <div
diff --git a/src/components/MenuBar/ExportLogsButton.tsx b/src/components/MenuBar/ExportLogsButton.tsx
@@ -1,3 +1,5 @@
+import {useCallback} from "react";
+
 import {
     CircularProgress,
     Typography,
@@ -23,9 +25,13 @@ import MenuBarIconButton from "./MenuBarIconButton";
  */
 const ExportLogsButton = () => {
     const exportProgress = useLogExportStore((state) => state.exportProgress);
-    const exportLogs = useLogExportStore((state) => state.exportLogs);
     const uiState = useUiStore((state) => state.uiState);
 
+    const handleExportButtonClick = useCallback(() => {
+        const {exportLogs} = useLogExportStore.getState();
+        exportLogs();
+    }, []);
+
     return (
         <MenuBarIconButton
             className={ignorePointerIfFastLoading(uiState)}
@@ -37,7 +43,7 @@ const ExportLogsButton = () => {
                 ) ||
                 isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
             }
-            onClick={exportLogs}
+            onClick={handleExportButtonClick}
         >
             {null === exportProgress ?
                 <DownloadIcon/> :
diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx
@@ -1,3 +1,5 @@
+import {useCallback} from "react";
+
 import {
     Box,
     Divider,
@@ -28,14 +30,14 @@ import "./index.css";
  */
 const MenuBar = () => {
     const fileName = useLogFileStore((state) => state.fileName);
-    const loadFile = useLogFileStore((state) => state.loadFile);
     const uiState = useUiStore((state) => state.uiState);
 
-    const handleOpenFile = () => {
+    const handleOpenFile = useCallback(() => {
         openFile((file) => {
+            const {loadFile} = useLogFileStore.getState();
             loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
         });
-    };
+    }, []);
 
     return (
         <>
diff --git a/src/components/PopUps/PopUpMessageBox.tsx b/src/components/PopUps/PopUpMessageBox.tsx
@@ -1,4 +1,5 @@
 import React, {
+    useCallback,
     useEffect,
     useRef,
     useState,
@@ -39,14 +40,13 @@ interface PopUpMessageProps {
 const PopUpMessageBox = ({message}: PopUpMessageProps) => {
     const {id, level, primaryAction, message: messageStr, title, timeoutMillis} = message;
 
-    const handlePopUpMessageClose = useNotificationStore((state) => state.handlePopUpMessageClose);
-
     const [percentRemaining, setPercentRemaining] = useState<number>(100);
     const intervalCountRef = useRef<number>(0);
 
-    const handleCloseButtonClick = () => {
+    const handleCloseButtonClick = useCallback(() => {
+        const {handlePopUpMessageClose} = useNotificationStore.getState();
         handlePopUpMessageClose(id);
-    };
+    }, [id]);
 
     const handlePrimaryActionClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
         primaryAction?.onClick?.(ev);
@@ -66,6 +66,7 @@ const PopUpMessageBox = ({message}: PopUpMessageProps) => {
             intervalCountRef.current++;
             const newPercentRemaining = 100 - (100 * (intervalCountRef.current / totalIntervals));
             if (0 >= newPercentRemaining) {
+                const {handlePopUpMessageClose} = useNotificationStore.getState();
                 handlePopUpMessageClose(id);
             }
             setPercentRemaining(newPercentRemaining);
@@ -76,7 +77,6 @@ const PopUpMessageBox = ({message}: PopUpMessageProps) => {
         };
     }, [
         timeoutMillis,
-        handlePopUpMessageClose,
         id,
     ]);
 
diff --git a/src/stores/logFileStore.ts b/src/stores/logFileStore.ts
@@ -1,4 +1,3 @@
-/* eslint max-lines-per-function: ["error", 70] */
 import * as Comlink from "comlink";
 import {create} from "zustand";
 
@@ -42,11 +41,6 @@ interface LogFileValues {
 }
 
 interface LogFileActions {
-    setFileName: (newFileName: string) => void;
-    setMetadata: (newMetadata: Nullable<Metadata>) => void;
-    setNumEvents: (newNumEvents: number) => void;
-    setOnDiskFileSizeInBytes: (newOnDiskFileSizeInBytes: number) => void;
-
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void;
 }
 
@@ -103,17 +97,22 @@ const handleQueryResults = (progress: number, results: QueryResults) => {
     mergeQueryResults(results);
 };
 
-// eslint-disable-next-line max-lines-per-function
-const useLogFileStore = create<LogFileState>((set, get) => ({
+
+const useLogFileStore = create<LogFileState>((set) => ({
     ...LOG_FILE_STORE_DEFAULT,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => {
         const {setUiState} = useUiStore.getState();
         setUiState(UI_STATE.FILE_LOADING);
 
-        const {setFileName, setMetadata, setOnDiskFileSizeInBytes} = get();
-        setFileName("Loading...");
-        setMetadata(LOG_FILE_STORE_DEFAULT.metadata);
-        setOnDiskFileSizeInBytes(LOG_FILE_STORE_DEFAULT.onDiskFileSizeInBytes);
+        set({
+            fileName: "Loading...",
+            fileSrc: fileSrc,
+            metadata: LOG_FILE_STORE_DEFAULT.metadata,
+            onDiskFileSizeInBytes: LOG_FILE_STORE_DEFAULT.onDiskFileSizeInBytes,
+        });
+        if ("string" !== typeof fileSrc) {
+            updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
+        }
 
         const {setExportProgress} = useLogExportStore.getState();
         setExportProgress(LOG_EXPORT_STORE_DEFAULT.exportProgress);
@@ -166,18 +165,6 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
             setUiState(UI_STATE.UNOPENED);
         });
     },
-    setFileName: (newFileName) => {
-        set({fileName: newFileName});
-    },
-    setMetadata: (newMetadata) => {
-        set({metadata: newMetadata});
-    },
-    setNumEvents: (newNumEvents) => {
-        set({numEvents: newNumEvents});
-    },
-    setOnDiskFileSizeInBytes: (newSize) => {
-        set({onDiskFileSizeInBytes: newSize});
-    },
 }));
 
 export default useLogFileStore;
