Snippet

Rendervorgänge optimieren mit React.memo

React.memo ist eine Higher-Order-Komponente, die die Ausgabe einer Komponente memoisiert. Sie überspringt das erneute Rendern der Komponente, wenn sich ihre Props nicht geändert haben, was die Performance in großen Listen verbessern kann.

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

Erklärung

const ListItem = React.memo(...)

Umschließt die Komponente, um Memoisation basierend auf der Gleichheit der Props zu aktivieren.

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

Dieser Log erscheint nur, wenn sich die 'item'-Prop zwischen den Renderings tatsächlich ändert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Rendervorgänge optimieren mit React.memo

Verwandt