Miért van megadva egy függőségek tömb React-ben?

A függőségi tömb (dependency array) a React hook-okban (például useEffect, useMemo, useCallback) megmutatja, hogy mely értékektől függ a hatás vagy a memorizált függvény végrehajtása.

Használatával lehetőség nyílik arra, hogy:

1. Teljesítmény optimalizálása: A React csak akkor futtatja újra a hatást vagy számítja újra az értéket, ha a függőségek tömbjében valamely érték az utolsó render óta megváltozott. Ez megelőzi a szükségtelen számításokat és frissítéseket.
2. Végtelen ciklusok elkerülése: Függőségi tömb nélkül vagy helytelenül megadva, a hatás minden rendereléskor futtatható, ami állapotfrissítést okoz, ami új renderelést vált ki, így végtelen ciklus alakulhat ki. A függőségek megadása biztosítja, hogy a hatás csak akkor fusson, amikor valóban szükséges.
3. A hatás életciklusának kontrollálása:
   • Egy üres tömb [] esetén a hatás csak egyszer fut le az első render után (hasonlóan a componentDidMount-hoz). Nem fut újra későbbi rendereléseknél, még akkor sem, ha a komponens állapota vagy props-ai változnak.
   • A függőségek tömbjének hiánya (vagy undefined) esetén a hatás minden rendereléskor fut.

Példa useEffect-tel:

// A hatás csak egyszer fut le az első render után
useEffect(() => {
  console.log('A komponens fel van szerelve');
}, []);

// A hatás az első render után és a `count` érték változásakor fut
useEffect(() => {
  console.log('A count értéke megváltozott:', count);
}, [count]);

// A hatás minden rendereléskor fut
useEffect(() => {
  console.log('Renderelés megtörtént');
});

Példa useMemo-val:

// Az `expensiveResult` érték csak akkor kerül újraszámításra, ha az a vagy b változik
const expensiveResult = useMemo(() => {
  console.log('Újraszámítás...');
  return a * b;
}, [a, b]);

Példa useCallback-tel:

// A `handleClick` függvény csak akkor lesz újra létrehozva, ha az id változik
const handleClick = useCallback(() => {
  console.log('Elemre kattintottak, id:', id);
}, [id]);

A függőségi tömb helyes megadása alapvető fontosságú a hook-ok helyes működéséhez és a React alkalmazások teljesítményéhez.