refactor for new react state handle pattern with useEffect. removed unnecessary useEffects

Author: developerHub01

src/renderer/src/components/app/collections/request/request/api-url/ApiUrl.tsx

@@ -1,11 +1,4 @@
-import {
-  type FormEvent,
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type FormEvent, memo, useCallback, useEffect, useState } from "react";
 import ApiMethodSelector from "@/components/app/collections/request/request/api-url/ApiMethodSelector";
 import ApiInput from "@/components/app/collections/request/request/api-url/ApiInput";
 import ApiCta from "@/components/app/collections/request/request/api-url/ApiCta";
@@ -22,14 +15,14 @@ import { fetchApi } from "@/context/redux/request-response/thunks/rest-api";
 const ApiUrl = memo(() => {
   const dispatch = useAppDispatch();
   const apiUrl = useAppSelector(selectRequestUrl);
-  const apiUrlRef = useRef<string>(apiUrl);
   const [url, setUrl] = useState<string>(apiUrl);
-  const [isError, setIsError] = useState<boolean>(false);
+  const [prevApiUrl, setPrevApiUrl] = useState<string>(apiUrl);
+  const isError = !isStrictApiUrl(url);
 
-  useEffect(() => {
+  if (apiUrl !== prevApiUrl) {
     setUrl(apiUrl);
-    apiUrlRef.current = apiUrl;
-  }, [apiUrl]);
+    setPrevApiUrl(apiUrl);
+  }
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -40,8 +33,7 @@ const ApiUrl = memo(() => {
   }, [dispatch]);
 
   useEffect(() => {
-    setIsError(!isStrictApiUrl(url));
-    if (url === apiUrlRef.current) return;
+    if (url === apiUrl) return;
     const timeout = setTimeout(() => {
       dispatch(
         changeRequestApiUrl({
@@ -50,7 +42,7 @@ const ApiUrl = memo(() => {
       );
     }, 500);
     return () => clearTimeout(timeout);
-  }, [dispatch, url]);
+  }, [apiUrl, dispatch, url]);
 
   const handleApiUrlChange = (value: string) => setUrl(value);
 

src/renderer/src/components/app/collections/request/response/meta-data/ResponseMetaWrapper.tsx

@@ -10,7 +10,7 @@ const ResponseMetaWrapper = ({ children, className, ...props }: Props) => {
   return (
     <section
       className={cn(
-        "flex justify-between items-center gap-2 px-2.5 min-h-10 border-b-2 border-border/5",
+        "flex justify-between items-center gap-2 px-2.5 min-h-10 border-b-2 border-border/50",
         className,
       )}
       {...props}

src/renderer/src/components/app/setting/content/http-status/SettingHttpList.tsx

@@ -35,7 +35,7 @@ const SettingHttpList = memo(() => {
   const statusList = useAppSelector(selectHttpStatusList);
 
   const list = useMemo(() => {
-    const categorizedList = statusSectionListObj;
+    const categorizedList = structuredClone(statusSectionListObj);
     Object.keys(statusList).forEach(code => {
       const index = Number(code[0]) - 1;
       categorizedList[index].value[code] = {

src/renderer/src/components/ui/paste-button.tsx

@@ -57,6 +57,7 @@ const PasteButton = memo(
     };
 
     useEffect(() => {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       checkClipboard();
 
       window.addEventListener("focus", checkClipboard);

src/renderer/src/context/collections/CollectionProvider.tsx

@@ -10,6 +10,7 @@ import { DEFAULT_AUTHORIZATION_ID } from "@/constant/authorization.constant";
 import { loadInheritParentAuthorization } from "@/context/redux/request-response/thunks/auth";
 import type { TAuthContextType } from "@shared/types/authorization.types";
 import { selectSelectedTab } from "@/context/redux/request-response/selectors/tab-list";
+import { selectIsLoadingInheritParentAuthorization } from "@/context/redux/status/selectors/authorization";
 
 interface CollectionContext {
   isLoading: boolean;
@@ -34,16 +35,14 @@ interface CollectionProviderProps {
 
 const CollectionProvider = ({ children, type }: CollectionProviderProps) => {
   const dispatch = useAppDispatch();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const isLoading = useAppSelector(selectIsLoadingInheritParentAuthorization);
   const selectedTab = useAppSelector(selectSelectedTab);
   const id = type === "global" ? DEFAULT_AUTHORIZATION_ID : selectedTab;
 
   const handleLoadInheritParentAuthorization = useCallback(
     async (id?: string | null) => {
       if (!id) return;
-      setIsLoading(true);
       await dispatch(loadInheritParentAuthorization(id));
-      setIsLoading(false);
     },
     [dispatch],
   );

src/renderer/src/context/environments/EnvironmentsProvider.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -56,51 +57,44 @@ const EnvironmentsProvider = ({ children }: EnvironmentsProviderProps) => {
   const environmentsListFromStore = useAppSelector(
     state => state.environments.environmentsList ?? {},
   );
-
-  const [environmentsListState, setEnvironmentsListState] = useState<
-    Record<string, EnvironmentInterface>
-  >({});
-  const [searchQuery, setSearchQuery] = useState("");
-
-  /* Update the list whenever the main list or search query changes */
-  const updateFilteredEnvironments = useCallback(
-    (query: string) => {
-      setEnvironmentsListState(
-        searchFilteredEnvironments({
-          searchQuery: query,
-          environmentsList: environmentsListFromStore,
-        }),
-      );
-    },
-    [environmentsListFromStore],
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [debouncedQuery, setDebouncedQuery] = useState<string>("");
+
+  const environmentsListState = useMemo(
+    () =>
+      searchFilteredEnvironments({
+        searchQuery: debouncedQuery,
+        environmentsList: environmentsListFromStore,
+      }),
+    [debouncedQuery, environmentsListFromStore],
   );
 
   /* Debounced search */
-  const handleSearch = useCallback(
-    (value: string) => {
-      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+  const handleSearch = useCallback((value: string) => {
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
 
-      debounceTimeout.current = setTimeout(() => {
-        updateFilteredEnvironments(value);
-      }, DEBOUNCE_DELAY);
-    },
-    [updateFilteredEnvironments],
-  );
+    debounceTimeout.current = setTimeout(
+      () => setDebouncedQuery(value),
+      DEBOUNCE_DELAY,
+    );
+  }, []);
 
   /* Handle input change */
   const handleChangeSearchQuery = useCallback(
     (value: string) => {
       setSearchQuery(value);
+
+      if (!value) {
+        if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+        setDebouncedQuery("");
+        return;
+      }
+
       handleSearch(value);
     },
     [handleSearch],
   );
 
-  /* Initialize environments list on mount and whenever the store updates */
-  useEffect(() => {
-    updateFilteredEnvironments(searchQuery);
-  }, [environmentsListFromStore, searchQuery, updateFilteredEnvironments]);
-
   /* Clean up debounce on unmount */
   useEffect(() => {
     return () => {

src/renderer/src/context/history/HistoryDetailsProvider.tsx

@@ -58,6 +58,7 @@ const HistoryDetailsProvider = ({ children }: HistoryDetailsProviderProps) => {
     selectHistoryReplacingIsLoading,
   );
   const isLoading = isHistoryDetailsLoading || isHistoryReplacinglsLoading;
+  const [prevHistoryId, setPrevHistoryId] = useState<string | null>(historyId);
   const [activeMetaTab, setActiveMetaTab] = useState<TActiveTabType>("params");
   const [codeWrap, setCodeWrap] = useState<boolean>(false);
   const [isReplaceAlertOpen, setIsReplaceAlertOpen] = useState<boolean>(false);
@@ -80,9 +81,10 @@ const HistoryDetailsProvider = ({ children }: HistoryDetailsProviderProps) => {
     dispatch(loadRequestHistory());
   }, [dispatch, isOpen]);
 
-  useEffect(() => {
+  if (prevHistoryId !== historyId) {
     setActiveMetaTab("params");
-  }, [historyId]);
+    setPrevHistoryId(historyId);
+  }
 
   return (
     <HistoryDetailsContext.Provider

src/renderer/src/context/keyboard-shortcuts/KeyboardShortcutsProvider.tsx

@@ -86,6 +86,7 @@ const KeyboardShortcutsProvider = ({
   children,
 }: KeyboardShortcutsProviderProps) => {
   const projectId = useAppSelector(selectActiveProjectId);
+  const [prevProjectId, setPrevProjectId] = useState<string | null>(projectId);
   const [activeTab, setActiveTab] = useState<TKeyboardShortcutsTab>(
     projectId ? "local" : "global",
   );
@@ -97,9 +98,6 @@ const KeyboardShortcutsProvider = ({
     useState<SearchKeyListInterface>(searchKeyListInitial);
   const [selectedSearchByType, setSelectedSearchByType] =
     useState<SelectedSearchByTypeInterface>(selectedSearchByTypeInitial);
-  const [searchResult, setSearchResult] = useState<
-    Record<string, KeybaordShortCutInterface>
-  >({});
 
   const applyingKeybindingMap = useMemo(() => {
     if (activeTab === "global") return globalMap;
@@ -110,7 +108,7 @@ const KeyboardShortcutsProvider = ({
     };
   }, [activeTab, globalMap, localMap]);
 
-  useEffect(() => {
+  const searchResult = useMemo(() => {
     const keybindingMap: Record<string, KeybaordShortCutInterface> = {};
 
     /* if search term or search keys are emtpy then render whole list */
@@ -120,7 +118,7 @@ const KeyboardShortcutsProvider = ({
       (selectedSearchByType[activeTab] === "keyboard" &&
         !searchKeyList[activeTab].length)
     )
-      return setSearchResult(applyingKeybindingMap);
+      return applyingKeybindingMap;
 
     Object.entries(applyingKeybindingMap).map(([id, data]) => {
       const isSearchTermMatched =
@@ -142,8 +140,7 @@ const KeyboardShortcutsProvider = ({
         };
       }
     });
-
-    setSearchResult(keybindingMap);
+    return keybindingMap;
   }, [
     activeTab,
     applyingKeybindingMap,
@@ -152,11 +149,27 @@ const KeyboardShortcutsProvider = ({
     selectedSearchByType,
   ]);
 
-  useEffect(() => setActiveTab(projectId ? "local" : "global"), [projectId]);
+  useEffect(() => {}, [
+    activeTab,
+    applyingKeybindingMap,
+    searchKeyList,
+    searchTerm,
+    selectedSearchByType,
+  ]);
+
+  if (
+    prevProjectId !== projectId &&
+    (projectId ? "local" : "global") !== activeTab
+  ) {
+    setActiveTab(projectId ? "local" : "global");
+    setPrevProjectId(projectId);
+  }
 
-  const handleChangeActiveTab = useCallback((value?: TKeyboardShortcutsTab) => {
-    setActiveTab(prev => value ?? (prev === "global" ? "local" : "global"));
-  }, []);
+  const handleChangeActiveTab = useCallback(
+    (value?: TKeyboardShortcutsTab) =>
+      setActiveTab(prev => value ?? (prev === "global" ? "local" : "global")),
+    [],
+  );
 
   const handleChangeSearchTerm = useCallback(
     (value?: string) => {

src/renderer/src/context/local-password/LocalPasswordProvider.tsx

@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { createContext, useContext, useState } from "react";
 import { useAppSelector } from "@/context/redux/hooks";
 import { selectHaveLocalPassword } from "@/context/redux/local-password/selectors/local-password";
 import { selectLocalPasswordIsLoading } from "@/context/redux/status/selectors/local-password";
@@ -39,20 +33,19 @@ interface LocalPasswordProviderProps {
 const LocalPasswordProvider = ({ children }: LocalPasswordProviderProps) => {
   const haveLocalPassword = useAppSelector(selectHaveLocalPassword);
   const isLocalPasswordLoading = useAppSelector(selectLocalPasswordIsLoading);
-  const [stage, setStage] = useState<TLocalPasswordStage | null>(null);
+  const [stage, setStage] = useState<TLocalPasswordStage | null>(() => {
+    if (isLocalPasswordLoading) return null;
+    return haveLocalPassword ? "protect" : "change";
+  });
   const [isDisableRequest, setIsDisableRequest] = useState<boolean>(false);
-  const initialized = useRef<boolean>(false);
 
   const handleChangeStage = (level: TLocalPasswordStage) => setStage(level);
 
   const handleChangeDisableRequest = (value: boolean) =>
     setIsDisableRequest(value);
 
-  useEffect(() => {
-    if (isLocalPasswordLoading || initialized.current) return;
+  if (stage === null && !isLocalPasswordLoading)
     setStage(haveLocalPassword ? "protect" : "change");
-    initialized.current = true;
-  }, [haveLocalPassword, isLocalPasswordLoading]);
 
   return (
     <LocalPasswordContext.Provider

src/renderer/src/context/redux/status/selectors/authorization.ts

@@ -0,0 +1,7 @@
+import { createSelector } from "@reduxjs/toolkit";
+import type { RootState } from "@/context/redux/store";
+
+export const selectIsLoadingInheritParentAuthorization = createSelector(
+  [(state: RootState) => state.status.isLoadingInheritParentAuthorization],
+  isLoading => isLoading,
+);