Proč se v Reactu uvádí pole závislostí?

Pole závislostí (dependency array) v React hookách (například useEffect, useMemo, useCallback) ukazuje, na které hodnoty závisí provedení efektu nebo memoizované funkce.

Jeho použití umožňuje:

1. Optimalizovat výkon: React znovu spustí efekt nebo přepočítá hodnotu pouze tehdy, když se některá z hodnot v poli závislostí od posledního renderu změnila. Tím se zabrání zbytečným výpočtům a aktualizacím.
2. Vyhnout se nekonečným cyklům: Bez pole závislostí nebo s nesprávně uvedenými závislostmi může být efekt spuštěn při každém renderu, což způsobí aktualizaci stavu, která opět vyvolá render, čímž vznikne nekonečný cyklus. Uvedení závislostí zajišťuje, že efekt se spustí pouze tehdy, když je to skutečně nutné.
3. Ovládat životní cyklus efektu:
   • Prázdné pole [] znamená, že efekt se spustí pouze jednou po prvním renderu (podobně jako componentDidMount). Nebude se znovu spouštět při následných renderech, i když se změní stav nebo props komponenty.
   • Nepřítomnost pole závislostí (nebo undefined) znamená, že efekt se bude spouštět při každém renderu komponenty.

Příklad s useEffect:

// Efekt se spustí pouze jednou po prvním renderu
useEffect(() => {
  console.log('Komponenta byla namontována');
}, []);

// Efekt se spustí při prvním renderu a při změně hodnoty `count`
useEffect(() => {
  console.log('Hodnota count se změnila:', count);
}, [count]);

// Efekt se spustí při každém renderu
useEffect(() => {
  console.log('Render byl proveden');
});

Příklad s useMemo:

// Hodnota `expensiveResult` se přepočítá pouze při změně `a` nebo `b`
const expensiveResult = useMemo(() => {
  console.log('Přepočítávám...');
  return a * b;
}, [a, b]);

Příklad s useCallback:

// Funkce `handleClick` je znovu vytvořena pouze při změně `id`
const handleClick = useCallback(() => {
  console.log('Kliknuto na prvek s id:', id);
}, [id]);

Správné uvedení pole závislostí je klíčové pro správnou funkčnost hooků a výkon React aplikací.