javascript / beginner
Snippet
Verhindern überflüssiger Renderings mit React.memo
Standardmäßig rendern untergeordnete React-Komponenten neu, sobald die Elternkomponente aktualisiert wird. React.memo optimiert die Leistung durch flache Prop-Vergleiche und überspringt das Rendern bei unveränderten Props.
snippet.js
javascript
1
2
3
4
5
import React from 'react';export const StatusBadge = React.memo(function StatusBadge({ count }) {return <span className="badge">Count: {count}</span>;});
react
Erklärung
1
export const StatusBadge = React.memo(function StatusBadge({ count }) {
Umschließt die Komponente mit einer Higher-Order-Komponente, die das Renderergebnis zwischenspeichert.
2
return <span className="badge">Count: {count}</span>;
Gibt das Badge-Markup zurück und wird nur neu berechnet, wenn sich der Wert des count-Props ändert.