feat: improve app performance

Chia-Network · Jul 15, 2022 · a128375 · a128375
1 parent d91b178
commit a128375
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 33 deletions.
diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
@@ -1,6 +1,12 @@
 /* es-lint disable */
 import _ from 'lodash';
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  useCallback,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -149,9 +155,12 @@ const Projects = () => {
   const [modalSizeAndPosition, setModalSizeAndPosition] = useState(null);
   const windowSize = useWindowSize();
 
-  const handleTabChange = (event, newValue) => {
-    setTabValue(newValue);
-  };
+  const handleTabChange = useCallback(
+    (event, newValue) => {
+      setTabValue(newValue);
+    },
+    [setTabValue],
+  );
 
   useEffect(() => {
     const projectId = searchParams.get('projectId');
@@ -212,17 +221,20 @@ const Projects = () => {
   const pageIsMyRegistryPage =
     searchParams.has('myRegistry') && searchParams.get('myRegistry') === 'true';
 
-  const onOrganizationSelect = selectedOption => {
-    const orgUid = selectedOption[0].orgUid;
-    setSelectedOrganization(orgUid);
-    navigate(
-      `${location.pathname}?${getUpdatedUrl(location.search, {
-        param: 'orgUid',
-        value: orgUid,
-      })}`,
-      { replace: true },
-    );
-  };
+  const onOrganizationSelect = useCallback(
+    selectedOption => {
+      const orgUid = selectedOption[0].orgUid;
+      setSelectedOrganization(orgUid);
+      navigate(
+        `${location.pathname}?${getUpdatedUrl(location.search, {
+          param: 'orgUid',
+          value: orgUid,
+        })}`,
+        { replace: true },
+      );
+    },
+    [location, setSelectedOrganization],
+  );
 
   const onSearch = useMemo(
     () =>

diff --git a/src/pages/Units/index.js b/src/pages/Units/index.js
@@ -1,5 +1,11 @@
 import _ from 'lodash';
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  useCallback,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -145,9 +151,12 @@ const Units = () => {
   const [modalSizeAndPosition, setModalSizeAndPosition] = useState(null);
   const windowSize = useWindowSize();
 
-  const handleTabChange = (event, newValue) => {
-    setTabValue(newValue);
-  };
+  const handleTabChange = useCallback(
+    (event, newValue) => {
+      setTabValue(newValue);
+    },
+    [setTabValue],
+  );
 
   useEffect(() => {
     const unitId = searchParams.get('unitId');
@@ -157,7 +166,7 @@ const Units = () => {
     return () => dispatch(clearUnitData());
   }, [searchParams.get('unitId')]);
 
-  const closeProjectOpenedInDetailedView = () => {
+  const closeProjectOpenedInDetailedView = useCallback(() => {
     dispatch(clearUnitData());
     navigate(
       `${location.pathname}?${getUpdatedUrl(location.search, {
@@ -166,7 +175,7 @@ const Units = () => {
       })}`,
       { replace: true },
     );
-  };
+  }, [location]);
 
   useEffect(() => {
     const switchTabBySuccessfulRequest = {
@@ -303,22 +312,25 @@ const Units = () => {
     );
   }, [units]);
 
+  const onOrganizationSelect = useCallback(
+    selectedOption => {
+      const orgUid = selectedOption[0].orgUid;
+      setSelectedOrganization(orgUid);
+      navigate(
+        `${location.pathname}?${getUpdatedUrl(location.search, {
+          param: 'orgUid',
+          value: orgUid,
+        })}`,
+        { replace: true },
+      );
+    },
+    [location, setSelectedOrganization],
+  );
+
   if (!filteredColumnsTableData) {
     return null;
   }
 
-  const onOrganizationSelect = selectedOption => {
-    const orgUid = selectedOption[0].orgUid;
-    setSelectedOrganization(orgUid);
-    navigate(
-      `${location.pathname}?${getUpdatedUrl(location.search, {
-        param: 'orgUid',
-        value: orgUid,
-      })}`,
-      { replace: true },
-    );
-  };
-
   return (
     <>
       <StyledSectionContainer ref={unitsContainerRef}>