UseEffect() в реакции

useEffect — это React Hook, который позволяет синхронизировать компонент с изменениями в состоянии или свойствах компонента. Он принимает два аргумента, функцию обратного вызова и массив зависимостей. Функция обратного вызова выполняется при монтировании, обновлении или размонтировании компонента на основе зависимостей, указанных в массиве. Вот пример:

import React, { useState, useEffect } from 'react';
function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]);
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default App;

В этом примере у нас есть простой счетчик, который отображает значение счетчика, и кнопка, которая увеличивает значение счетчика при нажатии. Мы используем хук useState для определения состояния счетчика и функцию setCount для его обновления.

Мы также используем хук useEffect для регистрации сообщения в консоли всякий раз, когда значение счетчика изменяется. Мы передаем массив [count] в качестве второго аргумента useEffect, что означает, что функция обратного вызова будет выполняться только при изменении значения счетчика.

Таким образом, useEffect помогает нам отслеживать изменения состояния в нашем компоненте и выполнять побочные эффекты, такие как обновление DOM или получение данных из API, последовательным и предсказуемым образом.