Memoize some components

reduxjs · Dec 2, 2023 · a5db189 · a5db189
1 parent ea7e9d7
commit a5db189
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 58 deletions.
diff --git a/website/src/components/ExternalLinks.tsx b/website/src/components/ExternalLinks.tsx
@@ -1,84 +1,85 @@
 import Link from '@docusaurus/Link'
 import type { FC, ReactNode } from 'react'
+import { memo } from 'react'
 
 interface Props {
   readonly text?: ReactNode
 }
 
 export const ExternalLinks = {
-  WeakMap: ({ text = 'WeakMap' }) => (
+  WeakMap: memo(({ text = 'WeakMap' }) => (
     <Link
       to="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap"
       title="WeakMap"
     >
       <code>{text}</code>
     </Link>
-  ),
-  ReferenceEqualityCheck: ({ text = 'Reference Equality Check' }) => (
+  )),
+  ReferenceEqualityCheck: memo(({ text = 'Reference Equality Check' }) => (
     <Link
       to="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality"
       title="Reference Equality Check"
     >
       {text}
     </Link>
-  ),
-  Memoization: ({ text = 'memoization' }) => (
+  )),
+  Memoization: memo(({ text = 'memoization' }) => (
     <Link to="https://en.wikipedia.org/wiki/Memoization" title="Memoization">
       {text}
     </Link>
-  ),
-  IdentityFunction: ({ text = 'Identity Function' }) => (
+  )),
+  IdentityFunction: memo(({ text = 'Identity Function' }) => (
     <Link
       to="https://en.wikipedia.org/wiki/Identity_function"
       title="Identity Function"
     >
       {text}
     </Link>
-  ),
-  UseMemo: ({ text = 'useMemo' }) => (
+  )),
+  UseMemo: memo(({ text = 'useMemo' }) => (
     <Link
       to="https://react.dev/reference/react/useMemo#usememo"
       title="useMemo"
     >
       <code>{text}</code>
     </Link>
-  ),
-  UseCallback: ({ text = 'useCallback' }) => (
+  )),
+  UseCallback: memo(({ text = 'useCallback' }) => (
     <Link
       to="https://react.dev/reference/react/useCallback#usecallback"
       title="useCallback"
     >
       <code>{text}</code>
     </Link>
-  ),
-  ReReselect: ({ text = 'Re-reselect' }) => (
+  )),
+  ReReselect: memo(({ text = 'Re-reselect' }) => (
     <Link to="https://github.com/toomuchdesign/re-reselect" title="re-reselect">
       {text}
     </Link>
-  ),
-  Redux: ({ text = 'Redux' }) => (
+  )),
+  Redux: memo(({ text = 'Redux' }) => (
     <Link to="https://redux.js.org" title="Redux">
       {text}
     </Link>
-  ),
-  React: ({ text = 'React' }) => (
+  )),
+  React: memo(({ text = 'React' }) => (
     <Link to="https://react.dev" title="React">
       {text}
     </Link>
-  ),
-  ReactRedux: ({ text = 'React-Redux' }) => (
+  )),
+  ReactRedux: memo(({ text = 'React-Redux' }) => (
     <Link to="https://react-redux.js.org" title="React-Redux">
       {text}
     </Link>
-  ),
-  ReduxToolkit: ({ text = 'Redux-Toolkit' }) => (
+  )),
+  ReduxToolkit: memo(({ text = 'Redux-Toolkit' }) => (
     <Link to="https://redux-toolkit.js.org" title="Redux-Toolkit">
       {text}
     </Link>
-  )
+  ))
 } as const satisfies Record<string, FC<Props>>
 
-export const AllExternalLinks: FC = () => {
+export const AllExternalLinks: FC = memo(() => {
   return (
     <ul>
       {Object.values(ExternalLinks).map((ExternalLink, index) => (
@@ -90,4 +91,4 @@ export const AllExternalLinks: FC = () => {
       ))}
     </ul>
   )
-}
+})
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -1,6 +1,7 @@
 import Heading from '@theme/Heading'
 import clsx from 'clsx'
-import type { ComponentProps, ComponentType, FC, JSX } from 'react'
+import type { ComponentProps, ComponentType, FC } from 'react'
+import { memo } from 'react'
 import styles from './styles.module.css'
 
 interface FeatureItem {
@@ -58,7 +59,7 @@ const FeatureList: FeatureItem[] = [
   }
 ]
 
-const Feature: FC<FeatureItem> = ({ title, Svg, description }) => {
+const Feature: FC<FeatureItem> = memo(({ title, Svg, description }) => {
   return (
     <div className={clsx('col col--3')}>
       <div className="text--center">
@@ -70,7 +71,7 @@ const Feature: FC<FeatureItem> = ({ title, Svg, description }) => {
       </div>
     </div>
   )
-}
+})
 
 const HomepageFeatures: FC = () => {
   return (
@@ -86,4 +87,4 @@ const HomepageFeatures: FC = () => {
   )
 }
 
-export default HomepageFeatures
+export default memo(HomepageFeatures)
diff --git a/website/src/components/InternalLinks.tsx b/website/src/components/InternalLinks.tsx
@@ -1,49 +1,50 @@
 import Link from '@docusaurus/Link'
 import type { FC, ReactNode } from 'react'
+import { memo } from 'react'
 
 interface Props {
   readonly text: ReactNode
 }
 
 export const InternalLinks = {
-  Selector: ({ text = 'selector' }) => (
+  Selector: memo(({ text = 'selector' }) => (
     <Link
       to="/introduction/getting-started#selector-function"
       title="Selector Function"
     >
       {text}
     </Link>
-  ),
-  InputSelectors: ({ text = 'input selectors' }) => (
+  )),
+  InputSelectors: memo(({ text = 'input selectors' }) => (
     <Link
       to="/introduction/getting-started#input-selectors"
       title="Input Selectors"
     >
       {text}
     </Link>
-  ),
-  OutputSelector: ({ text = 'output selector' }) => (
+  )),
+  OutputSelector: memo(({ text = 'output selector' }) => (
     <Link
       to="/introduction/getting-started#output-selector"
       title="Output Selector"
     >
       {text}
     </Link>
-  ),
-  ResultFunction: ({ text = 'result function' }) => (
+  )),
+  ResultFunction: memo(({ text = 'result function' }) => (
     <Link
       to="/introduction/getting-started#result-function"
       title="Result Function"
     >
       {text}
     </Link>
-  ),
-  Dependencies: ({ text = 'dependencies' }) => (
+  )),
+  Dependencies: memo(({ text = 'dependencies' }) => (
     <Link to="/introduction/getting-started#dependencies" title="Dependencies">
       {text}
     </Link>
-  ),
-  CascadingMemoization: ({ text = 'Cascading Memoization' }) => (
+  )),
+  CascadingMemoization: memo(({ text = 'Cascading Memoization' }) => (
     <Link
       to="/introduction/how-does-reselect-work#cascading-memoization"
       title="Cascading Memoization"
@@ -52,43 +53,43 @@ export const InternalLinks = {
         <i>{text}</i>
       </b>
     </Link>
-  ),
-  OutputSelectorFields: ({ text = 'Output Selector Fields' }) => (
+  )),
+  OutputSelectorFields: memo(({ text = 'Output Selector Fields' }) => (
     <Link
       to="/api/createSelector#output-selector-fields"
       title="Output Selector Fields"
     >
       {text}
     </Link>
-  ),
-  CreateSelector: () => (
+  )),
+  CreateSelector: memo(() => (
     <Link to="/api/createSelector" title="createSelector">
       <code>createSelector</code>
     </Link>
-  ),
-  CreateSelectorCreator: () => (
+  )),
+  CreateSelectorCreator: memo(() => (
     <Link to="/api/createSelectorCreator" title="createSelectorCreator">
       <code>createSelectorCreator</code>
     </Link>
-  ),
-  LruMemoize: () => (
+  )),
+  LruMemoize: memo(() => (
     <Link to="/api/lruMemoize" title="lruMemoize">
       <code>lruMemoize</code>
     </Link>
-  ),
-  WeakMapMemoize: () => (
+  )),
+  WeakMapMemoize: memo(() => (
     <Link to="/api/weakMapMemoize" title="weakMapMemoize">
       <code>weakMapMemoize</code>
     </Link>
-  ),
-  UnstableAutotrackMemoize: () => (
+  )),
+  UnstableAutotrackMemoize: memo(() => (
     <Link to="/api/unstable_autotrackMemoize" title="unstable_autotrackMemoize">
       <code>unstable_autotrackMemoize</code>
     </Link>
-  ),
-  CreateStructuredSelector: () => (
+  )),
+  CreateStructuredSelector: memo(() => (
     <Link to="/api/createStructuredSelector" title="createStructuredSelector">
       <code>createStructuredSelector</code>
     </Link>
-  )
+  ))
 } as const satisfies Record<string, FC<Props>>
diff --git a/website/src/components/PackageManagerTabs.tsx b/website/src/components/PackageManagerTabs.tsx
@@ -2,6 +2,7 @@ import CodeBlock from '@theme/CodeBlock'
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 import type { FC } from 'react'
+import { memo } from 'react'
 
 const PACKAGE_NAME = 'reselect'
 
@@ -26,4 +27,4 @@ const PackageManagerTabs: FC = () => {
   )
 }
 
-export default PackageManagerTabs
+export default memo(PackageManagerTabs)
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -5,9 +5,10 @@ import Heading from '@theme/Heading'
 import Layout from '@theme/Layout'
 import clsx from 'clsx'
 import type { FC } from 'react'
+import { memo } from 'react'
 import styles from './index.module.css'
 
-const HomepageHeader: FC = () => {
+const HomepageHeader: FC = memo(() => {
   const { siteConfig } = useDocusaurusContext()
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
@@ -27,7 +28,7 @@ const HomepageHeader: FC = () => {
       </div>
     </header>
   )
-}
+})
 
 const Home: FC = () => {
   const { siteConfig } = useDocusaurusContext()
@@ -44,4 +45,4 @@ const Home: FC = () => {
   )
 }
 
-export default Home
+export default memo(Home)