Как использовать useEffect в React: полное руководство с примерами

useEffect в React - это хук, который позволяет добавлять side-effect при каждой отрисовке (render) компонента. Side-effect может быть любым действием, которое нужно произвести после отрисовки компонента, например, обновить DOM, получить данные с сервера или выполнить анимацию.

Пример использования useEffect:

import React, { useState, useEffect } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count is ${count}`;
  });
  return (
    <>
      
{count}
       setCount(count + 1)}>Increment
    
  );
}

В этом примере мы создаем компонент Counter с состоянием count, которое увеличивается на 1 при нажатии на кнопку. Мы также используем useEffect для обновления заголовка документа при каждом изменении состояния count.

useEffect принимает два параметра: колбэк-функцию и массив зависимостей. Колбэк-функция будет вызываться после каждой отрисовки компонента. Массив зависимостей позволяет определить, должна ли колбэк-функция вызываться при каждой отрисовке или только при изменении некоторых значений. Если в массиве зависимостей указано пустое значение ([]), то колбэк-функция будет вызываться только при монтировании и размонтировании компонента.

В общем, useEffect - это мощный инструмент, который помогает выполнить любые side-effect действия при отрисовке компонента и позволяет избежать многих проблем, связанных с синхронизацией состояний и DOM. Однако, следует помнить, что использование useEffect может привести к потере производительности, если side-effect действия слишком затратны по времени или используются неоптимальные алгоритмы.