React.memo vs. useMemo

Memo

Memo lets you skip re-rendering a component when its props are unchanged.

import { memo } from 'react';



const SomeComponent = memo(function SomeComponent(props) {

  // ...

});        

Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed.

Usage?

!!! Skipping re-rendering when props are unchanged

useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}        

Usage?

!!! Skipping expensive recalculations?

To cache a calculation between re-renders, wrap it in a useMemo call at the top level of your component:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}        

On every subsequent render, React will compare the dependencies with the dependencies you passed during the last render. If none of the dependencies have changed (compared with Object.is), useMemo will return the value you already calculated before. Otherwise, React will re-run your calculation and return the new value.

In other words, useMemo caches a calculation result between re-renders until its dependencies change.

Difference between memo and useMemo()

Memo and useMemo() are both used in React for performance optimization, but they serve different purposes.

Memo is a higher-order component that is used to memoize a component, which means it caches the output of the component and only re-renders it if its props have changed. This can be useful when a component's rendering is expensive, and you want to avoid unnecessary re-renders. Memo can be imported from 'react' and wrapped around a functional component.

useMemo() is a hook that lets you cache the result of a calculation between re-renders. It takes a function and an array of dependencies as input and returns a cached value that will be re-used between renders as long as the dependencies do not change. This is useful when you have a computation that is expensive and needs to be run only when its dependencies change.

In summary, Memo is used for caching an entire component, while useMemo() is used for caching a specific calculation or value. Memo caches a component's output based on its props, while useMemo() caches a value based on its dependencies.