Hook efektu useEffect w React

Do pracy z efektami stosuje się hook useEffect. Przyjrzyjmy się jego działaniu.

Na początek zaimportujmy nasz hook:

App.jsximport { useEffect } from 'react';

Stwórzmy komponent App, zawierający nagłówek:

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

export default App;

Załóżmy, że musimy wykonać jakąś akcję po renderowaniu, na przykład, ustawić kolor tła całej strony. W tym przypadku systemem zewnętrznym będzie DOM przeglądarki.

Zastosujmy nasz hook:

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

W drugim parametrze przekazywana jest tablica zależności. Zawiera ona wartości używane przez funkcje komponentu. Na razie pozostawiliśmy ją pustą. W tym przypadku kolor zostanie ustawiony na zielony tylko raz po renderowaniu. Nie można całkowicie pominąć drugiego parametru, ponieważ twój komponent może wejść w nieskończoną pętlę.