feat: add memo in some componentes

Signed-off-by: Arthur Andrade <arthurfelandrade@gmail.com>

src/components/common/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import {
   List as UIList,
   Icon as UIIcon,
@@ -137,4 +137,4 @@ function Footer() {
   )
 }
 
-export default Footer
+export default memo(Footer)

src/components/sections/Hero/Hero.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type { ReactNode } from 'react'
 import UIHero, {
   HeroContent,
@@ -75,4 +75,4 @@ const Hero = ({
   )
 }
 
-export default Hero
+export default memo(Hero)

src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
 
 import ProductCard from '../../product/ProductCard'
@@ -21,4 +21,4 @@ function ProductShelf({ products }: ProductShelfProps) {
   )
 }
 
-export default ProductShelf
+export default memo(ProductShelf)

src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react'
+
+import type { BreadcrumbProps } from '.'
+import Breadcrumb from '.'
+
+interface BreadcrumbWrapperProps
+  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
+  name: string
+}
+
+const BreadcrumbWrapper = ({
+  breadcrumbList,
+  name,
+}: BreadcrumbWrapperProps) => {
+  const fallback = [{ item: '/', name, position: 1 }]
+  const list = breadcrumbList ?? fallback
+
+  return <Breadcrumb breadcrumbList={list} />
+}
+
+export default memo(BreadcrumbWrapper)

src/components/ui/Breadcrumb/index.tsx

@@ -1,2 +1,3 @@
 export { default } from './Breadcrumb'
+export { default as BreadcrumbWrapper } from './BreadcrumbWrapper'
 export type { BreadcrumbProps } from './Breadcrumb'

src/hooks/useSearchParams.ts

@@ -0,0 +1,37 @@
+import type { SearchState } from '@faststore/sdk'
+import { parseSearchState } from '@faststore/sdk'
+import type {
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables,
+} from '@generated/graphql'
+import type { PageProps } from 'gatsby'
+import { useMemo } from 'react'
+
+export type Props = PageProps<
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables
+> & { slug: string }
+
+export const useSearchParams = (props: Props): SearchState => {
+  const {
+    location: { href, pathname },
+    data,
+  } = props
+
+  const selectedFacets = data?.collection?.meta.selectedFacets
+
+  return useMemo(() => {
+    const maybeState = href ? parseSearchState(new URL(href)) : null
+
+    return {
+      page: maybeState?.page ?? 0,
+      base: maybeState?.base ?? pathname,
+      selectedFacets:
+        maybeState && maybeState.selectedFacets.length > 0
+          ? maybeState.selectedFacets
+          : selectedFacets ?? [],
+      term: maybeState?.term ?? null,
+      sort: maybeState?.sort ?? 'score_desc',
+    }
+  }, [href, pathname, selectedFacets])
+}

src/pages/{StoreCollection.slug}.tsx

@@ -1,57 +1,26 @@
-import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
-import React, { useMemo } from 'react'
+import React, { memo, useMemo } from 'react'
 import Loadable from '@loadable/component'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
 import { Headphones as HeadphonesIcon } from 'phosphor-react'
-import type { SearchState } from '@faststore/sdk'
-import type { PageProps } from 'gatsby'
-import type {
-  CollectionPageQueryQuery,
-  CollectionPageQueryQueryVariables,
-} from '@generated/graphql'
-import Breadcrumb from 'src/components/ui/Breadcrumb'
-import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
 import ScrollToTopButton from 'src/components/ui/ScrollToTopButton'
+import { BreadcrumbWrapper } from 'src/components/ui/Breadcrumb'
+import type { Props } from 'src/hooks/useSearchParams'
+import { useSearchParams } from 'src/hooks/useSearchParams'
 
 import '../styles/pages/product-listing.scss'
 
 const ProductShelf = Loadable(
   () => import('src/components/sections/ProductShelf')
 )
 
-export type Props = PageProps<
-  CollectionPageQueryQuery,
-  CollectionPageQueryQueryVariables
-> & { slug: string }
-
-const useSearchParams = (props: Props): SearchState => {
-  const {
-    location: { href, pathname },
-    data,
-  } = props
-
-  const selectedFacets = data?.collection?.meta.selectedFacets
-
-  return useMemo(() => {
-    const maybeState = href ? parseSearchState(new URL(href)) : null
-
-    return {
-      page: maybeState?.page ?? 0,
-      base: maybeState?.base ?? pathname,
-      selectedFacets:
-        maybeState && maybeState.selectedFacets.length > 0
-          ? maybeState.selectedFacets
-          : selectedFacets ?? [],
-      term: maybeState?.term ?? null,
-      sort: maybeState?.sort ?? 'score_desc',
-    }
-  }, [href, pathname, selectedFacets])
-}
+const HeadphonesIconMemo = memo(HeadphonesIcon)
 
 function Page(props: Props) {
   const {
@@ -76,9 +45,6 @@ function Page(props: Props) {
     [allStoreProduct]
   )
 
-  const haveYouMightAlsoLikeProducts =
-    youMightAlsoLikeProducts && youMightAlsoLikeProducts?.length > 0
-
   return (
     <SearchProvider
       onChange={applySearchState}
@@ -122,14 +88,14 @@ function Page(props: Props) {
             subtitle={`All the amazing ${title} from the brands we partner with.`}
             imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
             imageAlt="Quest 2 Controller on a table"
-            icon={<HeadphonesIcon size={48} weight="thin" />}
+            icon={<HeadphonesIconMemo size={48} weight="thin" />}
           />
         </section>
       </div>
 
       <ProductGallery title={title} slug={slug} />
 
-      {haveYouMightAlsoLikeProducts && (
+      {youMightAlsoLikeProducts?.length > 0 && (
         <section className="page__section page__section-shelf page__section-divisor / grid-section">
           <h2 className="title-section / grid-content">You might also like</h2>
           <div className="page__section-content">
@@ -145,18 +111,6 @@ function Page(props: Props) {
   )
 }
 
-interface BreadcrumbWrapperProps
-  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
-  name: string
-}
-
-function BreadcrumbWrapper({ breadcrumbList, name }: BreadcrumbWrapperProps) {
-  const fallback = [{ item: '/', name, position: 1 }]
-  const list = breadcrumbList ?? fallback
-
-  return <Breadcrumb breadcrumbList={list} />
-}
-
 /**
  * This query is run during SSG
  * */