Created at 322 days ago, modified at 199 days ago

`React.memo` vs `useMemo` vs `cache`

React.memo is a higher-order component that we can use to wrap function components that we do not want to re-render unless props within them change.

Class components can be restricted from re-rendering when their input props are the same using PureComponent or shouldComponentUpdate.

useMemo is a React Hook that is used to cache the result of a computationally expensive function between re-renders in a Client Component. We can use this to ensure that the values within that function are re-computed only when one of its dependencies change.

We can use cache in Server Components to memoize work that can be shared across components. cache should only be used in Server Components and the cache will be invalidated across server requests.

In summary, React.memo is used to optimize the rendering of components, useMemo is used to optimize the performance of specific function calls within a component while cache is used to memoize work that can be shared across components in Server Components.