De ce se indică un array de dependențe în React?

Array-ul de dependințe (dependency array) din hooks-urile React (de exemplu, useEffect, useMemo, useCallback) indică asupra căror valori depinde executarea efectului sau a funcției memorate.

Utilizarea sa permite:

1. Optimizarea performanței: React reia executarea efectului sau recalcularea valorii doar atunci când oricare dintre valorile din array-ul de dependințe s-a schimbat de la ultima randare. Acest lucru previne calculele și actualizările inutile.
2. Evitarea ciclurilor infinite: Fără un array de dependințe sau cu dependințe incorect specificate, efectul poate fi executat la fiecare randare, cauzând o actualizare de stare care la rândul său provoacă o nouă randare, creând un ciclu infinit. Specificarea dependințelor asigură că efectul se rulează doar atunci când este cu adevărat necesar.
3. Controlul ciclului de viață al efectului:
   • Un array gol [] înseamnă că efectul va fi rulat o singură dată după prima randare (similar cu componentDidMount). Nu va fi rerulat la randările ulterioare, chiar dacă starea sau props-urile componentului se schimbă.
   • Lipsa unui array de dependințe (sau undefined) înseamnă că efectul va fi rulat la fiecare randare a componentului.

Exemplu cu useEffect:

// Efectul se rulează doar o dată după prima randare
useEffect(() => {
  console.log('Component montat');
}, []);

// Efectul se rulează la prima randare și la schimbarea valorii `count`
useEffect(() => {
  console.log('Valoarea count s-a schimbat:', count);
}, [count]);

// Efectul se rulează la fiecare randare
useEffect(() => {
  console.log('A fost efectuată o randare');
});

Exemplu cu useMemo:

// Valoarea `expensiveResult` se recalculază doar când `a` sau `b` se schimbă
const expensiveResult = useMemo(() => {
  console.log('Recalculare...');
  return a * b;
}, [a, b]);

Exemplu cu useCallback:

// Funcția `handleClick` este recreată doar când `id` se schimbă
const handleClick = useCallback(() => {
  console.log('S-a făcut clic pe elementul cu id:', id);
}, [id]);

Specificarea corectă a array-ului de dependințe este esențială pentru funcționarea corectă a hook-urilor și performanța aplicațiilor React.