Pure Components in React: Wie sie funktionieren und wann man sie einsetzen sollte

Pure Components in React drehen sich alles um Performance. Sie helfen Ihrer Anwendung, unnötige Re-Renders zu vermeiden, indem sie prüfen, ob sich die Eingaben der Komponente (Props oder State) tatsächlich geändert haben. In diesem Artikel betrachten wir, wie Pure Components funktionieren, wie man sie einsetzt und wann sie nützlich sind – mit klaren, modernen Beispielen.

Was ist eine Pure Component?

Eine Pure Component ist eine Komponente, die nur dann neu gerendert wird, wenn sich ihre Props oder ihr State geändert haben. React bestimmt, ob ein erneutes Rendern erforderlich ist, indem es einen flachen Vergleich der aktuellen Props/State mit den vorherigen durchführt.

Verwendung von React.PureComponent

React.PureComponent ist das Klassenkomponenten-Äquivalent einer reinen Funktion. Es implementiert eine integrierte shouldComponentUpdate()-Methode, die einen flachen Vergleich durchführt.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Wenn sich this.props.text nicht geändert hat, wird die Komponente nicht neu gerendert.

Funktionale Alternative: React.memo

Für Funktionskomponenten verwenden Sie React.memo().

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

React überspringt das Rendern, wenn text identisch mit dem vorherigen Render ist.

Wie flache Vergleiche funktionieren

Ein flacher Vergleich bedeutet:

• Primitive Werte (wie Zahlen oder Strings) werden nach Wert verglichen
• Objekte und Arrays werden nach Referenz verglichen

{ a: 1 } === { a: 1 } // false
const obj = { a: 1 }
obj === obj // true

Wenn Sie also ein Objekt übergeben, das mutiert statt neu erstellt wird, bemerkt eine Pure Component möglicherweise die Änderung nicht.

Praxisbeispiel

Ohne Optimierung

const Item = ({ data }) => <div>{data.label}</div>;

Dies wird neu gerendert, wenn die übergeordnete Komponente neu gerendert wird, auch wenn sich data nicht geändert hat.

Mit React.memo

const Item = React.memo(({ data }) => <div>{data.label}</div>);

Jetzt wird die Komponente nur neu gerendert, wenn data ein neues Objekt ist.

Wann sollte man PureComponent oder memo verwenden

• Sie rendern Listen mit vielen Elementen
• Die Props der Komponente bleiben zwischen Renderings stabil
• Sie möchten Render-Zyklen in leistungskritischen Teilen Ihrer App reduzieren
• Sie verwenden useCallback oder useMemo, um Referenzen zu erhalten

Häufige Fallstricke

• Flache Vergleiche erkennen keine tiefen Änderungen (verschachtelte Objekte/Arrays)
• Verwenden Sie es nicht, wenn Sie nicht sicher sind, dass Props nicht stillschweigend mutiert werden
• Kann Fehler verursachen, wenn Sie instabile Referenzen übergeben

React.memo vs React.PureComponent

Funktion React.PureComponent React.memo Komponententyp Klassenkomponente Funktionskomponente Vergleichslogik Props + State (flach) Nur Props (flach) Benutzerdefinierte ❌ ✅ React.memo(fn) Vergleichsfunktion Moderne Verwendung Weniger verbreitet Weit verbreitet

Fazit

Pure Components können React helfen, Re-Renders zu überspringen und Ihre UI performant zu halten – aber sie sind kein Allheilmittel. Bevorzugen Sie React.memo für Funktionskomponenten und bedenken Sie, dass bei flachen Vergleichen Referenzen wichtig sind. Verwenden Sie es, wenn Performance wichtig ist und Props stabil sind.

FAQs