Хук ефекта useEffect у React-у

За рад са ефектима користи се хук useEffect. Погледајмо како функционише.

За почетак, увезмо наш хук:

App.jsximport { useEffect } from 'react';

Креирајмо компоненту App која садржи наслов:

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

export default App;

Претпоставимо да треба да извршимо неку акцију након рендеровања, на пример, поставити позадинску боју целе странице. У овом случају спољни систем би био DOM прегледача.

Применимо наш хук:

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

У другом параметру прослеђује се низ зависности. У њега улазе вредности које користе функције компоненте. Засад смо га оставили празним. У овом случају боја ће се поставити на зелено само једном након рендеровања. Потпуно уклонити други параметар није могуће, јер ваша компонента може ући у бесконачну петљу.