Optimizing Renders with React.memo

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

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

const ListItem = React.memo(...)

Wraps the component to enable memoization based on prop equality.

console.log('Rendering:', item.name)

This log will only appear if the 'item' prop actually changes between renders.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Optimizing Renders with React.memo

Related