Effekt-hooken useEffect i React

For å jobbe med effekter brukes hooken useEffect. La oss se på hvordan den fungerer.

Først importerer vi vår hook:

App.jsximport { useEffect } from 'react';

La oss opprette en komponent App som inneholder en overskrift:

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

export default App;

Anta at vi må utføre en handling etter rendering, for eksempel sette bakgrunnsfargen på hele siden. I dette tilfellet vil det eksterne systemet være DOM i nettleseren.

La oss bruke vår hook:

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

I den andre parameteren sendes en avhengighetsarray. Den inneholder verdier som brukes av funksjonene i komponenten. Foreløpig har vi latt den stå tom. I dette tilfellet vil fargen bli satt til grønn bare én gang etter rendering. Du kan ikke fjerne den andre parameteren helt, ettersom komponenten din kan gå inn i en uendelig løkke.