Kāpēc React norāda atkarību masīvu?

Atkarības masīvs (dependency array) React hookos (piemēram, useEffect, useMemo, useCallback) norāda, no kuriem vērtībām ir atkarīgs efekta vai memoizētās funkcijas izpilde.

Tās lietošana ļauj:

1. Optimizēt veiktspēju: React atkārtoti palaidīs efektu vai pārskatīs vērtību tikai tad, ja kāda no atkarības masīva vērtībām ir mainījusies kopš pēdējā pārkrāsojuma. Tas novērš nevajadzīgus aprēķinus un atjauninājumus.
2. Izvairīties no bezgalīgiem cikliem: Bez atkarības masīva vai ar nepareizi norādītām atkarībām, efekts var tikt izpildīts katrā pārkrāsošanā, izraisot stāvokļa atjaunināšanu, kas atkal izraisa pārkrāsošanu, radot bezgalīgu ciklu. Norādot atkarības, tiek nodrošināts, ka efekts tiek palaists tikai tad, kad tas patiešām ir nepieciešams.
3. Kontrolēt efekta dzīves ciklu:
   • Tukšs masīvs [] nozīmē, ka efekts tiks palaists tikai vienu reizi pēc pirmā pārkrāsojuma (analogiski ar componentDidMount). Tas netiks atkārtoti palaists turpmākajos pārkrāsojumos, pat ja stāvoklis vai props mainīsies.
   • Ja nav norādīts atkarības masīvs vai tas ir undefined, efekts tiks izpildīts katrā pārkrāsošanā.

Piemērs ar useEffect:

// Efekts tiks palaists tikai vienu reizi pēc pirmā pārkrāsojuma
useEffect(() => {
  console.log('Komponents ir montēts');
}, []);

// Efekts tiks palaists pirmajā pārkrāsošanā un, ja mainīsies `count`
useEffect(() => {
  console.log('Count vērtība ir mainījusies:', count);
}, [count]);

// Efekts tiks izpildīts katrā pārkrāsošanā
useEffect(() => {
  console.log('Notika pārkrāsošana');
});

Piemērs ar useMemo:

// `expensiveResult` vērtība tiks pārskatīta tikai, mainoties `a` vai `b`
const expensiveResult = useMemo(() => {
  console.log('Pārskatīšana...');
  return a * b;
}, [a, b]);

Piemērs ar useCallback:

// Funkcija `handleClick` tiks izveidota no jauna tikai, mainoties `id`
const handleClick = useCallback(() => {
  console.log('Elementa ar id:', id, 'spiežot');
}, [id]);

Pareizi norādīts atkarības masīvs ir ļoti svarīgs, lai nodrošinātu pareizu hook funkcionalitāti un React lietojumprogrammu veiktspēju.