Новый пост Y_LAB Actual | Код под микроскопом 🔍 Продолжаем рубрику… — Войти в Y_LAB | IT развитие и юмор — TG.ME

Новый пост Y_LAB Actual | Код под микроскопом

Продолжаем рубрику, в которой разбираем реальные инженерные ситуации и ищем причины проблем, которые не всегда очевидны на первый взгляд.
Сегодня под микроскопом — React и повторные запросы

function UserProfile({ userId }) {
const [user, setUser] = useState(null);

const options = {
headers: {
Authorization: "Bearer token"
}
};

useEffect(() => {
fetch(`/api/users/${userId}`, options)
.then(response => response.json())
.then(setUser);
}, [userId, options]);

return <div>{user?.name}</div>;
}

Почему при обычном рендере компонента API может начать получать множество одинаковых запросов?

useEffect зависит от userId;
запрос выполняется при изменении пользователя;
после получения данных вызывается setUser.

Но есть одна проблема:

const options = {
headers: {
Authorization: "Bearer token"
}
};

Этот объект создаётся заново при каждом рендере компонента.

А useEffect следит за ним:

[userId, options]

React сравнивает зависимости по ссылке.
Поэтому для него:

options → старый объект
options → новый объект

— это разные значения, даже если содержимое объектов полностью одинаковое.

Что происходит дальше?

Компонент рендерится -> Создаётся новый options -> useEffect отправляет запрос -> При получении ответа вызывается setUser -> Компонент снова рендерится -> Создаётся новый options -> React считает зависимость изменившейся -> useEffect снова отправляет запрос

И так запросы могут начать повторяться снова и снова.

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

Если объект действительно не меняется, его можно вынести за пределы компонента:

const options = {
headers: {
Authorization: "Bearer token"
}
};

function UserProfile({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetch(`/api/users/${userId}`, options)
.then(response => response.json())
.then(setUser);
}, [userId]);

return <div>{user?.name}</div>;
}

Но иногда проблема решается не внутри самого компонента. Можно вынести работу с API в отдельный слой. Например, компонент отвечает только за отображение данных, а запросы находятся в отдельном сервисе:

Component
↓
API layer
↓
Backend

Ещё один вариант — использовать библиотеку для работы с серверными данными. Например, TanStack Query или RTK Query. Они позволяют вынести запросы и управление их состоянием за пределы компонентов, а также предоставляют кэширование, дедупликацию запросов и другие механизмы для работы с серверными данными. В результате компоненту не обязательно самостоятельно решать, когда отправить запрос, где хранить результат и нужно ли повторно загружать те же данные.



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

Лишнюю нагрузку на API;
Замедление интерфейса;
Превышение rate limit;
Неожиданные 429 Too Many Requests;
Лишние расходы на инфраструктуру.

И проблему не всегда получится обнаружить просто открыв Network DevTools. Если запрос выполняется на сервере (например, при SSR или в Server Components), его вообще может не быть среди сетевых запросов браузера. Поэтому при подозрении на лишние обращения к API стоит смотреть не только на frontend, но и на логи, метрики и трассировку запросов.

А замечали когда-нибудь, что один компонент способен породить десятки одинаковых запросов?

#Y_LAB_University #Y_LAB_Actual