A useEffect hatás Hook React-ben

A hatások kezelésére a useEffect Hookot használjuk. Nézzük meg, hogyan működik.

Először importáljuk a Hookot:

App.jsximport { useEffect } from 'react';

Hozzunk létre egy App komponenst, amely egy címet tartalmaz:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Tegyük fel, hogy valamilyen műveletet kell végrehajtanunk a renderelés után, például be kell állítanunk az egész oldal háttérszínét. Ebben az esetben a külső rendszer a böngésző DOM-ja lesz.

Alkalmazzuk a Hookot:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

A második paraméter a függőségi tömb. Ebbe tartoznak a komponens függvényei által használt értékek. Most üresen hagytuk. Ebben az esetben a háttérszín zöldre vált csak egyszer, a renderelés után. A második paramétert teljesen elhagyni nem lehet, mivel a komponens végtelen ciklusba kerülhet.