Do czego służy tablica zależności w React?

Tablica zależności (dependency array) w hookach React (np. useEffect, useMemo, useCallback) wskazuje, od jakich wartości zależy wykonanie efektu lub zapamiętanej funkcji.

Jej użycie pozwala:

1. Optymalizować wydajność: React ponownie uruchamia efekt lub przelicza wartość tylko wtedy, gdy któraś z wartości w tablicy zależności zmieniła się od ostatniego renderowania. Zapobiega to niepotrzebnym obliczeniom i aktualizacjom.
2. Unikać nieskończonych cykli: Bez tablicy zależności lub z nieprawidłowo wskazanymi zależnościami, efekt może być wykonywany przy każdym renderze, wywołując aktualizację stanu, która z kolei powoduje ponowne renderowanie, tworząc nieskończoną pętlę. Określenie zależności gwarantuje, że efekt uruchomi się tylko wtedy, gdy jest to naprawdę konieczne.
3. Kontrolować cykl życia efektu:
   • Pusta tablica [] oznacza, że efekt zostanie uruchomiony tylko raz po pierwszym renderze (odpowiednik componentDidMount). Nie będzie ponownie uruchamiany przy kolejnych renderach, nawet jeśli stan lub propsy komponentu się zmienią.
   • Brak tablicy zależności (lub undefined) oznacza, że efekt będzie uruchamiany przy każdym renderze komponentu.

Przykład z useEffect:

// Efekt uruchomi się tylko raz po pierwszym renderze
useEffect(() => {
  console.log('Komponent zamontowany');
}, []);

// Efekt uruchomi się przy pierwszym renderze i po zmianie wartości count
useEffect(() => {
  console.log('Wartość count się zmieniła:', count);
}, [count]);

// Efekt uruchomi się przy każdym renderze
useEffect(() => {
  console.log('Render');
});

Przykład z useMemo:

// Wartość expensiveResult jest przeliczana tylko przy zmianie a lub b
const expensiveResult = useMemo(() => {
  console.log('Przeliczanie...');
  return a * b;
}, [a, b]);

Przykład z useCallback:

// Funkcja handleClick jest tworzona na nowo tylko przy zmianie id
const handleClick = useCallback(() => {
  console.log('Kliknięto element z id:', id);
}, [id]);

Poprawne określenie tablicy zależności jest kluczowe dla poprawnego działania hooków i wydajności aplikacji React.