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

У другім параметры перадаецца масіў залежнасцей. У іх уваходзяць значэнні, якія выкарыстоўваюцца функцыямі кампанента. Пакуль мы пакінулі іх пустымі. У гэтым выпадку колер усталюецца ў зялёны толькі адзін раз пасля рэндэрынгу. Зусім прыбраць другі параметр нельга, так як ваш кампанент можа ўвайсці ў бясконцы цыкл.