Snippet

Vermeiden unnötiger Re-Renderings mit React.memo

React-Komponenten werden standardmäßig neu gerendert, sobald ihre Elternkomponente neu rendert. Das Einpacken einer Funktionskomponente in React.memo führt einen flachen Vergleich der Props durch, wodurch unnötige Render-Zyklen übersprungen und die Performance verbessert werden.

snippet.js

javascript

import React from 'react';
 
function UserBadge({ username }) {
  return <div className="user-badge">User: {username}</div>;
}
 
export default React.memo(UserBadge);

react

Erklärung

function UserBadge({ username }) {

Deklariert eine Darstellungskomponente, die das Prop username entgegennimmt.

export default React.memo(UserBadge);

Ummantelt UserBadge mit einer Higher-Order-Komponente, die das Render-Ergebnis basierend auf Props-Gleichheit memoisieren kann.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Vermeiden unnötiger Re-Renderings mit React.memo

Verwandt