Na čo sa v React-e uvádza pole závislostí?

Závislý poľ (dependency array) v hookoch React (napríklad useEffect, useMemo, useCallback) určuje, od akých hodnôt závisí vykonanie efektu alebo memoizovanej funkcie.

Jeho použitie umožňuje:

1. Optimalizovať výkon: React opakovane spustí efekt alebo prepočíta hodnotu iba vtedy, keď sa ktorákoľvek z hodnôt v závislostiach zmenila od posledného renderu. To zabraňuje zbytočným výpočtom a aktualizáciám.
2. Vyhnúť sa nekonečným cyklom: Bez poľa závislostí alebo s nesprávne uvedenými závislosťami sa efekt môže spustiť pri každom renderi, čo spôsobí aktualizáciu stavu, ktorá spôsobí ďalší render, čím vznikne nekonečný cyklus. Uvedenie závislostí zabezpečuje, že efekt sa spustí iba vtedy, keď je to naozaj potrebné.
3. Ovládať životný cyklus efektu:
   • Prázdne pole [] znamená, že efekt sa spustí iba raz po prvom renderi (analogicky k componentDidMount). Nebude sa spúšťať pri ďalších renderoch, aj keď sa stav alebo props komponentu zmenia.
   • Neexistencia poľa závislostí (alebo undefined) znamená, že efekt sa bude spúšťať pri každom renderi komponentu.

Príklad s useEffect:

// Efekt sa spustí iba raz po prvom renderi
useEffect(() => {
  console.log('Komponent bol namontovaný');
}, []);

// Efekt sa spustí pri prvom renderi a pri zmene hodnoty count
useEffect(() => {
  console.log('Hodnota count sa zmenila:', count);
}, [count]);

// Efekt sa spustí pri každom renderi
useEffect(() => {
  console.log('Došlo k renderu');
});

Príklad s useMemo:

// Hodnota expensiveResult sa prepočítava iba pri zmene a alebo b
const expensiveResult = useMemo(() => {
  console.log('Prepočítavam...');
  return a * b;
}, [a, b]);

Príklad s useCallback:

// Funkcia handleClick sa vytvorí nanovo iba pri zmene id
const handleClick = useCallback(() => {
  console.log('Klikli ste na prvok s id:', id);
}, [id]);

Správne uvedenie poľa závislostí je kritické pre správnu funkčnosť hookov a výkon React aplikácií.