Hook-ul de efect useEffect în React

Pentru lucrul cu efecte se folosește hook-ul useEffect. Să ne uităm la modul său de funcționare.

Pentru început, să importăm hook-ul nostru:

App.jsximport { useEffect } from 'react';

Să creăm un component App care conține un titlu:

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

export default App;

Să presupunem că trebuie să efectuăm o acțiune după randare, de exemplu, să setăm culoarea de fundal a întregii pagini. În acest caz, sistemul extern va fi DOM-ul browserului.

Să aplicăm hook-ul nostru:

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

În al doilea parametru este transmis un array de dependențe. În acesta intră valorile utilizate de funcțiile componentului. Deocamdată, le-am lăsat goale. În acest caz, culoarea va fi setată la verde doar o dată, după randare. Nu se poate elimina complet al doilea parametru, deorece componentul vostru ar putea intra într-un ciclu infinit.