Зашто се у React-у наводи низ зависности?

Niz zavisnosti (dependency array) u React hook-ovima (npr. useEffect, useMemo, useCallback) pokazuje na koje vrednosti zavisi izvršenje efekta ili memorisane funkcije.

Njegova upotreba omogućava:

1. Optimizaciju performansi: React ponovo pokreće efekat ili preračunava vrednost samo kada se neka od vrednosti u nizu zavisnosti promeni od poslednjeg rendera. Ovo sprečava nepotrebne proračune i ažuriranja.
2. Izbegavanje beskonačnih ciklusa: Bez niza zavisnosti ili sa pogrešno navedenim zavisnostima, efekat može biti izvršen pri svakom renderu, izazivajući ažuriranje stanja koje ponovo izaziva render, stvarajući beskonačni ciklus. Navođenjem zavisnosti se garantuje da se efekat pokreće samo kada je to zaista potrebno.
3. Kontrolu životnog ciklusa efekta:
   • Prazan niz [] znači da će se efekat pokrenuti samo jednom nakon prvog rendera (slično componentDidMount). On se neće ponovo pokrenuti pri narednim renderima, čak ni ako se stanje ili props-ovi komponente promene.
   • Nepostojanje niza zavisnosti (ili undefined) znači da će se efekat pokrenuti pri svakom renderu komponente.

Primer sa useEffect:

// Efekat će se pokrenuti samo jednom nakon prvog rendera
useEffect(() => {
  console.log('Komponenta je montirana');
}, []);

// Efekat će se pokrenuti pri prvom renderu i pri promeni vrednosti `count`
useEffect(() => {
  console.log('Vrednost count se promenila:', count);
}, [count]);

// Efekat će se pokrenuti pri svakom renderu
useEffect(() => {
  console.log('Renderovan je');
});

Primer sa useMemo:

// Vrednost `expensiveResult` će se ponovo izračunati samo kada se promene a ili b
const expensiveResult = useMemo(() => {
  console.log('Ponovno računam...');
  return a * b;
}, [a, b]);

Primer sa useCallback:

// Funkcija handleClick će biti ponovo kreirana samo kada se promeni id
const handleClick = useCallback(() => {
  console.log('Kliknuto na element sa id:', id);
}, [id]);

Ispravno navođenje niza zavisnosti je ključno za pravilno funkcionisanje hook-ova i performanse React aplikacija.