Wofür wird ein Abhängigkeitsarray in React angegeben?

Das Abhängigkeitsarray (dependency array) in React-Hooks (z. B. useEffect, useMemo, useCallback) gibt an, von welchen Werten die Ausführung des Effekts oder der memoisierten Funktion abhängt.

Seine Verwendung ermöglicht:

1. Leistungsoptimierung: React führt den Effekt oder die Neuberechnung des Werts nur dann erneut aus, wenn sich einer der Werte im Abhängigkeitsarray seit dem letzten Render geändert hat. Dies verhindert unnötige Berechnungen und Aktualisierungen.
2. Vermeidung endloser Schleifen: Ohne Abhängigkeitsarray oder mit falsch angegebenen Abhängigkeiten kann der Effekt bei jedem Render ausgeführt werden, was eine Zustandsaktualisierung verursacht, die wiederum ein Rendern auslöst, und so eine Endlosschleife entsteht. Das Angeben von Abhängigkeiten stellt sicher, dass der Effekt nur bei tatsächlichem Bedarf ausgeführt wird.
3. Steuerung des Lebenszyklus des Effekts:
   • Ein leeres Array [] bedeutet, dass der Effekt nur einmal nach dem ersten Render ausgeführt wird (ähnlich wie componentDidMount). Er wird bei nachfolgenden Rendern nicht erneut ausgeführt, auch wenn sich Zustand oder Props des Components ändern.
   • Das Fehlen eines Abhängigkeitsarrays (oder undefined) bedeutet, dass der Effekt bei jedem Render des Components ausgeführt wird.

Beispiel mit useEffect:

// Effekt wird nur einmal nach dem ersten Render ausgeführt
useEffect(() => {
  console.log('Komponente wurde gemountet');
}, []);

// Effekt wird beim ersten Render und bei Änderung von count ausgeführt
useEffect(() => {
  console.log('Wert von count hat sich geändert:', count);
}, [count]);

// Effekt wird bei jedem Render ausgeführt
useEffect(() => {
  console.log('Render durchgeführt');
});

Beispiel mit useMemo:

// Der Wert expensiveResult wird nur bei Änderung von a oder b neu berechnet
const expensiveResult = useMemo(() => {
  console.log('Neuberechnung...');
  return a * b;
}, [a, b]);

Beispiel mit useCallback:

// Die Funktion handleClick wird nur neu erstellt, wenn sich id ändert
const handleClick = useCallback(() => {
  console.log('Auf Element mit id:', id, 'geklickt');
}, [id]);

Die korrekte Angabe des Abhängigkeitsarrays ist entscheidend für das korrekte Funktionieren der Hooks und die Leistung der React-Anwendungen.