fetch в useEffect
Тема дорожной карты · React
Загрузка данных с useEffect — это базовый паттерн для получения удалённых данных внутри функциональных React-компонентов: браузерный API fetch() (или Axios) вызывается внутри эффекта, запускающегося после монтирования компонента. Типичная реализация использует useState для отслеживания состояний data, loading и error, обновляя их внутри коллбэка useEffect по мере разрешения или отклонения промиса. Критически важная деталь при загрузке данных с useEffect — возврат функции очистки, устанавливающей флаг ignore или вызывающей AbortController.abort(), чтобы предотвратить обновление состояния после размонтирования компонента и избежать гонок запросов при быстром изменении пропсов. Хотя загрузка данных с useEffect проста для несложных случаев, производственные React-приложения всё чаще предпочитают специализированные библиотеки — @tanstack/react-query или SWR, — которые автоматически обрабатывают кеширование, дедублирование и фоновое обновление. Понимание механики загрузки данных через useEffect остаётся необходимым для React-разработчиков перед освоением высокоуровневых абстракций.
Как это работает
fetch в useEffect давно ушло от сырого fetch в useEffect. Современные приложения используют TanStack Query (бывший React Query) или SWR — обе управляют кешем, дедупом, фоновым refetch, оптимистичными обновлениями, loading/error состояниями. Паттерн: const {data, isLoading, error} = useQuery({queryKey, queryFn}). Библиотека сама следит за staleness, инвалидацией и пагинацией. Мутации — через useMutation, на успехе инвалидируют нужные queryKeys.
Когда применять
TanStack Query или SWR — для любых нетривиальных async-данных; они экономят недели на кеше и state-водопроводе. Сырой fetch+useEffect — только для простейших one-page демо. Для SSR-приложений (Next.js App Router) предпочитайте server components + server-side fetch; TanStack Query подключайте только для client-side кеша интерактивных view. Всегда рендерите isLoading и error явно — никогда не верьте только happy path.
Типичные ошибки
Ловушки fetch в useEffect: fetch внутри useEffect без cleanup (race: поздний ответ старого запроса перезаписывает свежие данные); дубликаты queryKey в разных компонентах (коллизии кеша); нет инвалидации кеша после мутации (stale-данные на экране); игнор error-границы (брошенная fetch-ошибка в effect не обрабатывается — оберните в try/catch или используйте error handling библиотеки).