Что будет при бесконечном обновлении состояния в React?

Что происходит при бесконечном обновлении состояния в React?

Когда вы обновляете состояние компонента, React запускает повторный рендеринг. Если обновление состояния происходит внутри самого процесса рендеринга (например, в теле компонента или в хуке useEffect без правильных зависимостей), это создает бесконечный цикл: рендер -> обновление состояния -> рендер -> обновление состояния и так далее.

Пример проблемы

Рассмотрим простой компонент, который обновляет состояние напрямую в теле:

function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Бесконечный цикл!
  return <div>{count}</div>;
}

Этот код вызовет бесконечный рендеринг, так как setCount вызывается при каждом рендере, что приводит к новому рендеру.

Как это исправить?

Обновление состояния должно происходить только в ответ на события или в хуках с правильными зависимостями. Например:

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Здесь setCount вызывается только при клике, а не при каждом рендере.

Вывод

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