# Avoid unnecessary re-renders with React.memo

> Prevent unnecessary component re-renders in React with React.memo, PureComponent, and shouldComponentUpdate.

- Canonical URL: https://marcelocarmona.com/avoid-unnecessary-re-renders-react-memo
- Language: English (en-US)
- Published: 2018-11-21
- Tags: React, JavaScript
- Other languages: [Espanol](https://marcelocarmona.com/es/evitar-re-renders-innecesarios-react-memo)

---

We don't want to re-render a component if the data for that component has not changed. In many cases, a component re-renders when its props change.

_[Interactive component: CodeSandbox — see the HTML page]_
In this example, we render a new Title for every click on the button.

With the React `memo` function, we can pass a stateless functional component and be sure that the component will not update if its props do not change.

_[Interactive component: CodeSandbox — see the HTML page]_
In a class, we can use `PureComponent`.

_[Interactive component: CodeSandbox — see the HTML page]_

It is also possible to use `shouldComponentUpdate`.

Warning: `shallowCompare` is a legacy add-on. Use `memo` or `PureComponent` instead.

_[Interactive component: CodeSandbox — see the HTML page]_

---

Site entrypoint for agents: [llms.txt](https://marcelocarmona.com/llms.txt) · [llms-full.txt](https://marcelocarmona.com/llms-full.txt) · [ai-index.json](https://marcelocarmona.com/ai-index.json) · [sitemap.xml](https://marcelocarmona.com/sitemap.xml)

Every HTML page on this site also serves this Markdown representation via
`Accept: text/markdown`, or by appending `.md` to the URL.