Kodėl React nurodo priklausomybių masyvą?

Priklausomybės masyvas (dependency array) React hook'uose (pavyzdžiui, useEffect, useMemo, useCallback) nurodo, nuo kurių reikšmių priklauso efekto arba memoizuotos funkcijos vykdymas.

Jo naudojimas leidžia:

1. Optimizuoti našumą: React pakartotinai paleidžia efektą arba peržiūri reikšmę tik tada, kai bet kuri iš priklausomybės masyvo reikšmių pasikeičia nuo paskutinio perrėžimo. Tai užkerta kelią nereikalingiems skaičiavimams ir atnaujinimams.
2. Išvengti begalinių ciklų: Be priklausomybės masyvo arba su neteisingai nurodytais priklausomybėmis, efektas gali būti vykdomas kiekvieno perrėžimo metu, sukeldamas būsenos atnaujinimą, kuris vėl sukelia perrėžimą, sukuriant begalinį ciklą. Nurodžius priklausomybes, užtikrinama, kad efektas būtų paleistas tik tada, kai tai tikrai būtina.
3. Valdyti efekto gyvavimo ciklą:
   • Tuščias masyvas [] reiškia, kad efektas bus paleistas tik vieną kartą po pirmojo perrėžimo (analogija su componentDidMount). Jis nebus pakartotinai paleistas vėlesniuose perrėžimuose, net jei būsenos ar props reikšmės pasikeis.
   • Jei nėra priklausomybės masyvo arba jis yra undefined, efektas bus vykdomas kiekvieno perrėžimo metu.

Pavyzdys su useEffect:

// Efektas bus paleistas tik vieną kartą po pirmojo perrėžimo
useEffect(() => {
  console.log('Komponentas įmontuotas');
}, []);

// Efektas bus paleistas pirmojo perrėžimo metu ir kai pasikeis `count`
useEffect(() => {
  console.log('Count reikšmė pasikeitė:', count);
}, [count]);

// Efektas bus vykdomas kiekvieno perrėžimo metu
useEffect(() => {
  console.log('Įvyko perrėžimas');
});

Pavyzdys su useMemo:

// `expensiveResult` reikšmė bus peržiūrima tik pasikeitus `a` arba `b`
const expensiveResult = useMemo(() => {
  console.log('Peržiūriu...');
  return a * b;
}, [a, b]);

Pavyzdys su useCallback:

// Funkcija `handleClick` bus kuriama iš naujo tik pasikeitus `id`
const handleClick = useCallback(() => {
  console.log('Paspausta elementas su id:', id);
}, [id]);

Tinkamai nurodytas priklausomybės masyvas yra labai svarbus teisingam hook'ų veikimui ir React programėlių našumui.