Hook efekta useEffect u React-u

Za rad sa efektima koristi se hook useEffect. Pogledajmo kako on funkcioniše.

Za početak, importujmo naš hook:

App.jsximport { useEffect } from 'react';

Kreirajmo komponentu App koja sadrži naslov:

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

export default App;

Pretpostavimo da treba da izvršimo neku radnju posle renderovanja, na primer, da postavimo boju pozadine cele stranice. U ovom slučaju, spoljni sistem će biti DOM pregledača.

Primenimo naš hook:

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

U drugi parametar se prosleđuje niz zavisnosti. U njih spadaju vrednosti koje koriste funkcije komponente. Za sada smo ih ostavili praznim. U ovom slučaju, boja će biti postavljena na zelenu samo jednom, posle renderovanja. U potpunosti ukloniti drugi parametar ne možete, pošto vaša komponenta može da uđe u beskonačnu petlju.