Основная задача компонента React — отображать пользовательский интерфейс. Он работает как простая функция: получает на вход данные (пропсы) и возвращает на выход JSX-разметку, которую нужно отрисовать. Этот процесс называется рендерингом.

В идеальном мире это всё, чем должен заниматься компонент. Такие функции, которые при одинаковых входных данных всегда возвращают одинаковый результат и не влияют ни на что за пределами себя, называются чистыми функциями . Представьте себе повара в ресторане. Его основная работа — готовить блюдо по рецепту (компонент) из предоставленных продуктов (пропсы). Результат — готовое блюдо (UI).

Но что, если во время готовки повару нужно позвонить поставщику, чтобы заказать еще продуктов? Или включить таймер? Это уже не часть основного рецепта. В React такие действия, выходящие за рамки простого рендеринга, называются побочными эффектами (side effects).

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

Представьте, что вы запрашиваете данные с сервера прямо в теле компонента.

1. Компонент рендерится в первый раз, отправляется запрос на сервер.
2. Данные приходят, вы обновляете состояние компонента.
3. Обновление состояния вызывает повторный рендеринг.
4. Компонент рендерится снова, и... опять отправляется запрос на сервер!

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

Еще одна проблема — блокировка рендеринга. Если ваш побочный эффект — это долгая операция (например, сложный расчет или медленный сетевой запрос), весь интерфейс «зависнет» в ожидании ее завершения. Пользователь не сможет взаимодействовать со страницей, пока операция не закончится. Это создает очень плохой пользовательский опыт.

Наконец, React использует концепцию «виртуального DOM», чтобы эффективно обновлять страницу. Прямое изменение DOM из компонента нарушает этот механизм. React теряет контроль над тем, что отображается на экране, что приводит к ошибкам и непредсказуемому поведению.

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

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