Хук за ефекти 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';
  }, []);
  
  ...
}

Във втория параметър се подава масив от зависимости. В него се включват стойности, използвани от функциите на компонента. Засега го оставихме празен. В този случай цветът ще се зададе на зелен само веднъж след рендриране. Напълно да премахнете втория параметър не може, тъй като вашият компонент може да влезе в безкраен цикъл.