javascript / intermediate
Snippet
Optimizing Renders with React.memo
React.memo is a higher-order component that memoizes the output of a component. It skips re-rendering the component if its props have not changed, which can improve performance in large lists.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ListItem = React.memo(function ListItem({ item }) {console.log('Rendering:', item.name);return <li>{item.name}</li>;});function List({ items }) {return (<ul>{items.map(item => (<ListItem key={item.id} item={item} />))}</ul>);}
react
Breakdown
1
const ListItem = React.memo(...)
Wraps the component to enable memoization based on prop equality.
2
console.log('Rendering:', item.name)
This log will only appear if the 'item' prop actually changes between renders.