# Evitar re-renders innecesarios con React.memo

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

---

No queremos re-renderizar un componente si la data de ese componente no cambió. En muchos casos, un componente se re-renderiza cuando las props cambian.

_[Interactive component: CodeSandbox — see the HTML page]_
En este ejemplo, renderizamos un nuevo Title por cada clic en el botón.

Con la función `memo`, podemos pasar un stateless functional component y estar seguros de que el componente no se actualizará si las props no cambian.

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

En una class, podemos usar `PureComponent`.

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

Y también es posible usar `shouldComponentUpdate`.

Cuidado: `shallowCompare` es un legacy add-on. Usa `memo` o `PureComponent`.

_[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.