feat: memoization on orgcard component

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

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/components/org-card.jsx b/src/components/org-card.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo } from "react"
 import PropTypes from "prop-types"
 import slugify from "slugify"
 import { useBreakpoint } from "gatsby-plugin-breakpoints"
@@ -7,17 +7,29 @@ import "./org-card.css"
 
 import { Link } from "gatsby"
 
-const OrgCard = ({ data }) => {
+const isSameOrg = (prevData, newData) => {
+  return prevData.data.name === newData.data.name
+}
+
+const OrgCard = memo(({ data }) => {
   const isMobile = useBreakpoint().md
 
   const years = Object.keys(data.years)
     .map(year => {
-      return <span className="org-card-year">{year}</span>
+      return (
+        <span key={year} className="org-card-year">
+          {year}
+        </span>
+      )
     })
     .reverse()
 
   let technologies = data.technologies.map(tech => {
-    return <span className="org-card-technology">{tech}</span>
+    return (
+      <span key={tech} className="org-card-technology">
+        {tech}
+      </span>
+    )
   })
 
   if (technologies.length > 5) {
@@ -66,7 +78,7 @@ const OrgCard = ({ data }) => {
       {card}
     </a>
   )
-}
+}, isSameOrg)
 
 OrgCard.propTypes = {
   data: PropTypes.object.isRequired,

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo } from "react"
 import Fuse from "fuse.js"
 import { graphql } from "gatsby"
 import { useBreakpoint } from "gatsby-plugin-breakpoints"
@@ -40,8 +40,7 @@ const getFuseSearch = organizations => {
   return new Fuse(organizations, options)
 }
 
-const getFilteredOrganizations = (data, searchQuery, filters) => {
-  const organizations = getOrganizations(data)
+const getFilteredOrganizations = (organizations, searchQuery, filters) => {
   let filteredOrganizations = organizations
 
   if (searchQuery !== "") {
@@ -113,41 +112,27 @@ const getFilteredOrganizations = (data, searchQuery, filters) => {
 const IndexPage = ({ data }) => {
   const searchQuery = useAppSelector(getSearch)
   const filters = useAppSelector(getFilters)
-  const [orgCards, setOrgCards] = useState([])
+  const allOrganizations = useMemo(() => getOrganizations(data), [])
+  const filteredOrganizations = getFilteredOrganizations(
+    allOrganizations,
+    searchQuery,
+    filters
+  )
 
   useEffect(() => {
     // Update the search params in the url if filters or search query
     // change.
-    const searchParams = {};
+    const searchParams = {}
 
     if (searchQuery) {
-      searchParams["search"] = searchQuery;
+      searchParams["search"] = searchQuery
     }
 
     if (Object.values(filters).filter(arr => arr.length !== 0).length !== 0) {
-      searchParams["filters"] = JSON.stringify(filters);
-    }
-
-    setSearchParams(searchParams);
-  }, [searchQuery, filters])
-
-  React.useEffect(() => {
-    let filteredOrganizations = getFilteredOrganizations(
-      data,
-      searchQuery,
-      filters
-    )
-
-    const cards = []
-    for (const organization of filteredOrganizations) {
-      cards.push(
-        <Grid.Column>
-          <OrgCard data={organization} />
-        </Grid.Column>
-      )
+      searchParams["filters"] = JSON.stringify(filters)
     }
 
-    setOrgCards(cards)
+    setSearchParams(searchParams)
   }, [searchQuery, filters])
 
   const metaDescription =
@@ -219,10 +204,16 @@ const IndexPage = ({ data }) => {
         <Notification />
       </Grid>
       <div style={{ marginTop: "1rem", textAlign: "center" }}>
-        <a className="ui orange label">{orgCards.length} results</a>
+        <a className="ui orange label">
+          {filteredOrganizations.length} results
+        </a>
       </div>
       <Grid className="index-org-cards-grid" stackable columns={cardColumns}>
-        {orgCards}
+        {filteredOrganizations.map(org => (
+          <Grid.Column key={org.name}>
+            <OrgCard data={org} />
+          </Grid.Column>
+        ))}
       </Grid>
       <div style={{ padding: "1rem" }}>
         <ins