feat(perf): memoization and other improvements

Signed-off-by: Nishant Mittal <[email protected]>
Namanv0509 · Dec 26, 2022 · b0edda2 · b0edda2
1 parent 0504096
commit b0edda2
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 105 deletions.
diff --git a/src/components/logo.jsx b/src/components/logo.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo } from "react"
 import PropTypes from "prop-types"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -38,4 +38,4 @@ Logo.defaultProps = {
   color: "#ffa62b",
 }
 
-export default Logo
+export default memo(Logo)
diff --git a/src/components/mobile/dimmer.jsx b/src/components/mobile/dimmer.jsx
@@ -1,23 +1,13 @@
-import React from "react"
+import React, { memo } from "react"
 import PropTypes from "prop-types"
 
 import "./dimmer.css"
 
-const getDimmerStyle = isSidebarVisible => {
-  if (!isSidebarVisible) {
-    return {
-      display: "none",
-    }
-  }
-}
-
 const Dimmer = ({ onClick, isSidebarVisible }) => {
+  const dimmerStyle = isSidebarVisible ? {} : { display: "none" }
+
   return (
-    <div
-      className="mobile-dimmer"
-      onClick={onClick}
-      style={getDimmerStyle(isSidebarVisible)}
-    ></div>
+    <div className="mobile-dimmer" onClick={onClick} style={dimmerStyle}></div>
   )
 }
 
@@ -26,4 +16,4 @@ Dimmer.propTypes = {
   isSidebarVisible: PropTypes.bool.isRequired,
 }
 
-export default Dimmer
+export default memo(Dimmer)
diff --git a/src/components/mobile/toolbar.jsx b/src/components/mobile/toolbar.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback, useState, memo } from "react"
 import PropTypes from "prop-types"
 
 import "./toolbar.css"
@@ -12,37 +12,27 @@ import { faBars } from "@fortawesome/free-solid-svg-icons"
 import { Link } from "gatsby"
 
 const Toolbar = ({ showSearch }) => {
-  const [isSidebarVisible, setSidebarVisibilty] = React.useState(false)
+  const [isSidebarVisible, setSidebarVisibilty] = useState(false)
+  const searchStyle = showSearch ? {} : { display: "none" }
 
-  const toggleSidebarVisibilty = () => {
-    setSidebarVisibilty(!isSidebarVisible)
-  }
-
-  const searchStyle = () => {
-    if (!showSearch) {
-      return {
-        display: "none",
-      }
-    }
-    return {}
-  }
-
-  const getLogo = () => {
-    return showSearch ? (
-      <Logo />
-    ) : (
-      <Link to="/">
-        <Logo />
-      </Link>
-    )
-  }
+  const toggleSidebarVisibilty = useCallback(() => {
+    setSidebarVisibilty(isVisible => !isVisible)
+  }, [])
 
   return (
     <div className="mobile-toolbar">
       <div className="mobile-toolbar-logo noselect">
-        <center>{getLogo()}</center>
+        <center>
+          {showSearch ? (
+            <Logo />
+          ) : (
+            <Link to="/">
+              <Logo />
+            </Link>
+          )}
+        </center>
       </div>
-      <div className="mobile-toolbar-search" style={searchStyle()}>
+      <div className="mobile-toolbar-search" style={searchStyle}>
         <center>
           <Search />
         </center>
@@ -74,4 +64,4 @@ Toolbar.propTypes = {
   showSearch: PropTypes.bool.isRequired,
 }
 
-export default Toolbar
+export default memo(Toolbar)
diff --git a/src/components/notification.jsx b/src/components/notification.jsx
@@ -1,11 +1,12 @@
-import React from "react"
+import React, { memo } from "react"
 import { Message } from "semantic-ui-react"
 
 const Notification = () => {
   const style = {
     width: "100%",
     margin: "1rem",
   }
+
   return (
     <Message positive style={style}>
       <Message.Header>
@@ -22,4 +23,4 @@ const Notification = () => {
   )
 }
 
-export default Notification
+export default memo(Notification)
diff --git a/src/components/org-card.jsx b/src/components/org-card.jsx
@@ -7,11 +7,7 @@ import "./org-card.css"
 
 import { Link } from "gatsby"
 
-const isSameOrg = (prevData, newData) => {
-  return prevData.data.name === newData.data.name
-}
-
-const OrgCard = memo(({ data }) => {
+const OrgCard = ({ data }) => {
   const isMobile = useBreakpoint().md
 
   const years = Object.keys(data.years)
@@ -36,7 +32,9 @@ const OrgCard = memo(({ data }) => {
     const extra = technologies.length - 5
     technologies = technologies.slice(0, 5)
     technologies.push(
-      <span className="org-card-technology-extra">{extra} more</span>
+      <span key={`#${extra} more`} className="org-card-technology-extra">
+        {extra} more
+      </span>
     )
   }
 
@@ -78,10 +76,14 @@ const OrgCard = memo(({ data }) => {
       {card}
     </a>
   )
-}, isSameOrg)
+}
 
 OrgCard.propTypes = {
   data: PropTypes.object.isRequired,
 }
 
-export default OrgCard
+const isSameOrg = (prevData, newData) => {
+  return prevData.data.name === newData.data.name
+}
+
+export default memo(OrgCard, isSameOrg)
diff --git a/src/components/search.jsx b/src/components/search.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from "react"
+import React, { useMemo, useState, useCallback, memo } from "react"
 import { debounce } from "debounce"
 
 import "./search.css"
@@ -12,19 +12,19 @@ const Search = () => {
   const dispatch = useAppDispatch()
   const [searchText, setSearchText] = useState(search)
 
-  const dispatchSetSearch = value => {
+  const dispatchSetSearch = useCallback(value => {
     dispatch(setSearch(value))
-  }
+  }, [])
 
   const debouncedDispatchSetSearch = useMemo(
     () => debounce(dispatchSetSearch, 200),
     []
   )
 
-  const handleChange = ({ target: { value } }) => {
+  const handleChange = useCallback(({ target: { value } }) => {
     setSearchText(value)
     debouncedDispatchSetSearch(value)
-  }
+  }, [])
 
   return (
     <div className="search-search">
@@ -36,4 +36,4 @@ const Search = () => {
   )
 }
 
-export default Search
+export default memo(Search)
diff --git a/src/components/sidebar.jsx b/src/components/sidebar.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback, useMemo, memo } from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 
@@ -41,6 +41,8 @@ const getSidebarStyles = config => {
 
 const Sidebar = ({ config, showFilters }) => {
   const dispatch = useAppDispatch()
+  const sidebarStyle = useMemo(() => getSidebarStyles(config), [config])
+  const filterStyle = showFilters ? {} : { display: "none" }
 
   const {
     filter: { topics, technologies, years, categories },
@@ -67,36 +69,25 @@ const Sidebar = ({ config, showFilters }) => {
     }
   `)
 
-  const clearAllFilters = () => {
+  const clearAllFilters = useCallback(() => {
     dispatch(clearFilters())
-  }
-
-  const filterStyle = () => {
-    if (!showFilters) {
-      return {
-        display: "none",
-      }
-    }
-    return {}
-  }
-
-  const getSidebarHeading = () => {
-    return showFilters ? (
-      <Container>GSoC Organizations</Container>
-    ) : (
-      <Link to="/">
-        <Container>GSoC Organizations</Container>
-      </Link>
-    )
-  }
+  }, [])
 
   return (
-    <div className="sidebar-sidebar" style={getSidebarStyles(config)}>
+    <div className="sidebar-sidebar" style={sidebarStyle}>
       <div className="sidebar-div">
         <div className="sidebar-logo-description">
-          <div className="sidebar-description">{getSidebarHeading()}</div>
+          <div className="sidebar-description">
+            {showFilters ? (
+              <Container>GSoC Organizations</Container>
+            ) : (
+              <Link to="/">
+                <Container>GSoC Organizations</Container>
+              </Link>
+            )}
+          </div>
         </div>
-        <div className="sidebar-content" style={filterStyle()}>
+        <div className="sidebar-content" style={filterStyle}>
           <div className="sidebar-content-clear-filters">
             <Button size="tiny" basic color="orange" onClick={clearAllFilters}>
               Clear all filters
@@ -207,4 +198,4 @@ Sidebar.defaultProps = {
   showFilters: true,
 }
 
-export default Sidebar
+export default memo(Sidebar)
diff --git a/src/layouts/desktop/layout.jsx b/src/layouts/desktop/layout.jsx
@@ -8,23 +8,8 @@ import Search from "../../components/search"
 import { Grid } from "semantic-ui-react"
 
 const Layout = ({ children, showFiltersAndSearch }) => {
-  const searchStyle = () => {
-    if (!showFiltersAndSearch) {
-      return {
-        display: "none",
-      }
-    }
-    return {}
-  }
-
-  const contentStyle = () => {
-    if (showFiltersAndSearch) {
-      return {
-        paddingTop: "60px",
-      }
-    }
-    return {}
-  }
+  const searchStyle = showFiltersAndSearch ? {} : { display: "none" }
+  const contentStyle = showFiltersAndSearch ? { paddingTop: "60px" } : {}
 
   return (
     <Grid className="desktop-layout-grid">
@@ -34,11 +19,11 @@ const Layout = ({ children, showFiltersAndSearch }) => {
         </Grid.Column>
         <Grid.Column className="desktop-layout-grid-column" width={12}>
           <center>
-            <div className="desktop-layout-search" style={searchStyle()}>
+            <div className="desktop-layout-search" style={searchStyle}>
               <Search />
             </div>
           </center>
-          <div className="desktop-layout-content" style={contentStyle()}>
+          <div className="desktop-layout-content" style={contentStyle}>
             {children}
           </div>
         </Grid.Column>