useEffect

A useEffect hook-ot olyan műveletek végrehajtására használjuk, amiket egy függvény alapú komponens törzsében nem lehetne elhelyezni. Ennek oka, hogy ez a React-nek a renderelési fázisa. Erre a célra lehet tehát használni.

Egy függvényt adunk át neki paraméterként, ami az után fut le, hogy a komponens renderelése megtörtént. Alapesetben az effektek lefutnak minden egyes befejeződött renderelés után, azonban a lefutást lehet befolyásolni úgy, hogy akkor fussanak le, amikor egy bizonyos érték megváltozik.

Használat

Mivel a React-nek a része, ezért a react csomag tartalmazza. Használathoz mindenképpen importálni kell:

import { useEffect } from "react";

Ha már a használatnál tartunk, akkor el kell mondani, hogy általában olyan kódokat szeretünk futtatni useEffect-el, amik ráérnek a render fázis után is lefutni és egyébként feleslegesen is blokkolnák a renderelési folyamatot. Például logolások, feliratkozások, stb.

Példa

A következő példában azt csináljuk, hogy megszámoljuk hányszor történt meg a renderelés és azt megjelenítjük a képernyőn. Használjuk a useState hook-ot is a számláló értékének a megváltoztatásához:

const [count, setCount] = useState(0);

A count state értéke kezdetben 0, tehát még a renderelés előtt vagyunk. A useEffect annyit fog csinálni, hogy egy setTimeout használatával, 1 másodperc eltelte után megnöveli a számláló értékét:

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, [])

Így jelenítjük meg:

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>Render counter: <strong>{count}</strong></Text>
    </View>
  );

A useEffect első paramétere egy függvény volt. A második paramétere pedig egy üres tömb. Ebbe a tömbbe azok a feltételek kerülnek, akik kiváltják a useEffect-nek átadott függvény meghívását. Ha nem adunk meg semmilyen feltételt, azaz üres tömböt adunk csak meg, akkor ebben az esetben egyetlen egyszer fut le a useEffect-ben levő kód. Tehát a számláló 0 értékről indul, aztán átvált 1-re.

Ha folyamatosan növekvő számlálót akarunk készíteni, akkor így kell módosítani a useEffect-et:

 useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, [<strong>count</strong>])

Vagyis a feltétel tömbben megadtunk egy olyan feltételt, hogy a useEffect-ben megadott kód fusson le valahányszor a count értéke megváltozik.