Как правильно использовать useState и useEffect в кастомном хуке для хранения данных и ошибок

Что проверяют

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

Как отвечать

Каркас хука useFetch(url):

• полное состояние: кроме data и error нужен isLoading или единое поле status. Независимые useState легко приходят в невозможную комбинацию, поэтому их обновляют вместе или берут useReducer;
• сброс при новом запросе: в начале эффекта setError(null) и включение загрузки, иначе ошибка от прошлого url висит поверх новых данных;
• отмена: в эффекте создают AbortController, передают signal в fetch, а в очистке вызывают controller.abort(). Тогда ответ на старый url, пришедший позже нового, не перезапишет данные. Ошибку AbortError в состояние не кладут;
• HTTP-ошибки: fetch не отклоняет промис на 404 или 500, статус проверяют через response.ok и бросают исключение сами;
• ошибка как объект: хранить Error, а не одну строку, чтобы компонент отличал сетевой сбой от ответа сервера;
• зависимости: в массиве только примитивы или стабильные ссылки. Объект опций, созданный прямо в JSX, новый на каждом рендере и зацикливает эффект;
• что вернуть: { data, error, isLoading, refetch }, где refetch обёрнут в useCallback.

Двойной запрос в разработке это StrictMode: React монтирует, размонтирует и снова монтирует компонент, проверяя очистку эффектов. С abort() в очистке первый запрос просто отменяется, в продакшене повтора нет.

В реальном проекте серверное состояние чаще отдают TanStack Query или SWR: кэш, повторы и дедупликация там уже есть. Самописный хук уместен для простых случаев.

Где спотыкаются

Делают сам колбэк эффекта async. Эффект должен вернуть функцию очистки, а не промис, поэтому асинхронную функцию объявляют внутри и вызывают.

Не обрабатывают гонку. Пользователь быстро переключает вкладки, и на экране оказываются данные предыдущего запроса.

Убирают двойной запрос, выключая StrictMode или ставя флаг в useRef, вместо того чтобы написать нормальную очистку.