Vaikutuksen useEffect-koukku Reactissa

Vaikutusten käsittelyyn käytetään koukku useEffect. Katsotaanpa sen toimintaa.

Aluksi tuodaan koukkumme:

App.jsximport { useEffect } from 'react';

Luodaan komponentti App, joka sisältää otsikon:

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

export default App;

Oletetaan, että meidän on tehtävä jokin toimenpide renderöinnin jälkeen, esimerkiksi asettava koko sivun taustaväri. Tässä tapauksessa ulkoinen järjestelmä on selaimen DOM.

Käytetään koukkuamme:

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

Toisena parametrina välitetään riippuvuuksien taulukko. Siihen kuuluvat komponentin funktioiden käyttämät arvot. Jätimme ne toistaiseksi tyhjiksi. Tässä tapauksessa väri asetetaan vihreäksi vain kerran renderöinnin jälkeen. Toista parametria ei voi jättää kokonaan pois, koska komponenttisi voi joutua päättymättömään silmukkaan.