React.memo and useMemo - What's the Difference?
Tags: react, typescript, hooks
Published: 2021-09-12 12:11:55

---
title: React.memo and useMemo - What's the Difference?
published: true
date: 2021-09-12 00:00:00 UTC
tags: react, typescript, hooks
description: What are they and when to use these for performance improvements
canonical_url: https://bionicjulia.com/blog/react-memo-and-usememo-whats-the-difference
---

Since first learning React and then building production-ready apps with it, I've been somewhat confused about when it's appropriate to use the memoization wrappers and hooks. The main ones are:

- React.memo
- useMemo
- useCallback

Speaking to other engineers about this, I've gotten responses all the way from "just use it wherever possible - there's no downside", to "not sure...but it's a good idea to use it when rendering lists". None of these answers were satisfactory, so I set aside some time to figure this out once and for all.

Things I'll cover in the series (which I'll break up into separate blog posts for digestibility):

- `React.memo` vs. `useMemo` - What's the difference?
- When to use and _not_ use `React.memo`.
- When to use and _not_ use `useMemo`.

## React.memo vs. useMemo - What's the difference?

### **React.memo**

`React.memo` is a higher order component that's used to wrap a React functional component. The way it works is:

- React does an initial render of the component when it first loads and stores it in memory.
- React does a **shallow** comparison of prop values. If `true`, React uses the memoized component and skips a re-render. If `false`, React re-renders the component.

A contrived example looks like this:

```jsx
export type VideoGameProps = {
  rating: string,
  name: string,
  releaseDate: string,
}

// NOTE React.memo wraps the entire component
export const VideoGame: React.FC<VideoGameProps> = React.memo(({ rating, name, releaseDate }) => (
  <div>
    <p>Name: {name}</p>
    <p>Rating: {rating}</p>
    <p>Release date: {releaseDate}</p>
    <hr />
  </div>
))
```

**Tip 1**: You can pass a second argument in to define a stricter comparison function, instead of using the default shallow comparison.

```jsx
const checkStrictEquality = (prevProps, newProps) => {
  // blah blah
}

React.memo(Component, checkStrictEquality)
```

**Tip 2**: Because of the use of shallow comparison, be careful about passing in non-primitive props like an object, array or function. Do not pass these in directly as props, but instead, instantiate and assign these to variables which are then passed in. For functions, the `useCallback` hook is handy for ensuring the same instance of the function is passed in as props, thus allowing the shallow prop comparison to result in `true`. For objects and arrays, the `useMemo` hook might be helpful, which I'll go through in the next section.

```jsx
const onClickHandler = useCallback(() => {
	// blah blah
}, [insert dependencies here]);

export const VideoGame: React.FC<VideoGameProps> = React.memo(
  ({ rating, name, releaseDate, onClickHandler }) => (
    <div>
      <p>Name: {name}</p>
      <p>Rating: {rating}</p>
      <p>Release date: {releaseDate}</p>
			<button onClick={onClickHandler}>Click</button>
      <hr />
    </div>
  )
);
```

**Tip 3**: If you're working with class-based components, think about using a [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) instead. `PureComponent`s allow you to define `shouldComponentUpdate()` which does a shallow comparison of props and state.

### **useMemo**

`useMemo` is a [React hook](https://reactjs.org/docs/hooks-reference.html#usememo) that can be used to wrap a function or object, within a React component. Similarly to `React.memo`, the idea is that the function will be run once and the value memoized. This hook takes 2 arguments, the computational function, and an array of dependencies that the function depends on. React will only recompute the memoized value if the value of one of the dependencies changes.

A contrived example:

```jsx
export type VideoGameSearchProps = {
  allGames: VideoGameProps[],
}

export const VideoGameSearch: React.FC<VideoGameSearchProps> = ({ allGames }) => {
  const [searchTerm, setSearchTerm] = React.useState('')
  const [count, setCount] = React.useState < number > 1

  // NOTE useMemo here!!
  const results = useMemo(() => {
    console.log('Filtering games')
    return allGames.filter((game) => game.name.includes(searchTerm))
  }, [searchTerm, allGames])

  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value)
  }

  const onClickHandler = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <>
      <input type="text" value={searchTerm} onChange={onChangeHandler} />
      {results.map((game) => (
        <VideoGame key={game.name} rating={game.rating} name={game.name} releaseDate={game.releaseDate} />
      ))}
      <br />
      <br />
      <p>Count: {count}</p>
      <button onClick={onClickHandler}>Increment count</button>
    </>
  )
}
```

There's quite a lot going on in the example above, but if you just focus on the `const results` function, the computed value is memoized and stored, and only recalculated if either the `searchTerm` or `allGames` array changes. If we had _not_ used the `useMemo` hook, the `results` function would have been constantly recalculated every time we clicked on the `button` to increment the `count` state, even though this does not directly affect the `results`. This is because a state change causes the `VideoGameSearch` parent component to rerender, thus forcing a recalculation of `results`.

### Concluding notes

The reason I say these are contrived examples are because... they are. I made these examples up for the purposes of illustration, and without more context, it's difficult to say whether the use of `React.memo` or `useMemo` would be worth it here. The reason for this is that React is already super speedy in how it performs its re-renders. If you're going to intercept this process, and introduce complexity, you should be sure that the tradeoff is indeed worth it.

In the next blog post, I'll go into more detail on when it might make sense to use the `React.memo` wrapper.

Comments, thoughts, edits? I'm on [Twitter](https://twitter.com/bionicjulia) and [Instagram](https://instagram.com/bionicjulia) @bionicjulia.