Ефект хука useEffect во React

За работа со ефекти се користи хукот useEffect. Ајде да ја погледнеме неговата работа.

За почеток, да го импортираме нашиот хук:

App.jsximport { useEffect } from 'react';

Да создадеме компонента App, која содржи наслов:

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

export default App;

Да претпоставиме дека треба да направиме некоја акција по рендерирањето, на пример, да поставиме боја на позадина на целата страница. Во овој случај, надворешниот систем ќе биде DOM на прелистувачот.

Да го примениме нашиот хук:

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

Во вториот параметар се пренесува низа на зависности. Во нив влегуваат вредностите кои ги користат функциите на компонентата. Засега ги оставивме празни. Во овој случај, бојата ќе се постави зелена само еднаш по рендерирањето. Воопшто да се отстрани вториот параметар не може, бидејќи вашата компонента може да влезе во бесконечен циклус.