---
title: React хуки для получения данных
---

import Features from '@components/features'
import { Callout } from 'nextra/components'

{/* wrapped with {} to mark it as javascript so mdx will not put it under a p tag */}
{<h1 className="text-center font-extrabold md:text-5xl mt-8">SWR</h1>}

<Features />

Название “SWR” происходит от `stale-while-revalidate`, стратегия инвалидации
HTTP-кеша, популяризированная
[HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). SWR — это стратегия,
которая сначала возвращает данные из кеша (устаревшие), затем отправляет запрос
(ревалидация), и в итоге возвращает актуальные данные.

<Callout emoji="✅">
  С SWR, компоненты получат поток **постоянно** и **автоматически** обновляющихся данных.

И пользовательский интерфейс всегда будет **быстрым** и **реактивным**.

</Callout>

<div className="mb-20 mt-16 text-center">
  [Начать работу](/docs/getting-started) · [Примеры](/examples) · [Блог](/blog)
  · [Репозиторий GitHub](https://github.com/vercel/swr)
</div>

## Обзор

```jsx
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>ошибка загрузки</div>
  if (!data) return <div>загрузка...</div>
  return <div>привет, {data.name}!</div>
}
```

В этом примере, хук `useSWR` принимает строку `key` и функцию `fetcher`. `key` —
это уникальный идентификатор данных (обычно URL-адрес API), который будет
передан в `fetcher`. `fetcher` может быть любая асинхронная функция, которая
возвращает данные, будь то нативный fetch или такие инструменты как Axios.

Хук возвращает 2 значения: `data` и `error`, основанные на статусе запроса.

## Особенности

Всего одной строкой кода вы можете упростить логику получения данных в своём
проекте, а также у вас будут эти удивительные возможности прямо из коробки:

- **Быстрая**, **легковесная** и **многократно используемая** выборка данных
- Встроенный **кеш** и дедупликация запросов
- Опыт **реального времени**
- Независимость от транспорта и протокола
- Поддержка SSR / ISR / SSG
- Готовность использования TypeScript
- React Native

SWR охватывает все аспекты скорости, правильности и стабильности, чтобы помочь
вам улучшить опыт:

- Быстрая навигация по страницам
- Интервальный опрос
- Зависимость от данных
- Ревалидация при фокусировке
- Ревалидация при восстановлении сети
- Локальные мутации (Optimistic UI)
- Умная повторная попытка при ошибке
- Пагинация и восстановление позиции прокрутки
- React Задержка (Suspense)

И многое [другое](/docs/getting-started).

## Сообщество

<p className="mt-6 flex h-6 gap-2">
  <img alt="звёзды" src="https://badgen.net/github/stars/vercel/swr" />
  <img alt="загрузки" src="https://badgen.net/npm/dt/swr" />
  <img alt="лицензия" src="https://badgen.net/npm/license/swr" />
</p>

SWR создана той же командой, что стоит за React фреймворком
[Next.js](https://nextjs.org). Следите за [@vercel](https://twitter.com/vercel)
в Твиттере, чтобы получать новости о проекте.

Присоединяйтесь к
[обсуждениям на GitHub](https://github.com/vercel/swr/discussions)!
