---
title: React Hooks for Data Fetching
searchable: false
---

import Features from '@components/features'
import { Callout, Tabs } 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>}

<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python', 'TypeScript', 'GraphQL', 'Rust', 'C#', 'Go', 'HTML', 'CSS', 'plaintext', 'bash']} defaultIndex={1}>
  <Tabs.Tab>
    ```js filename="hi.js"
    import { useState, useEffect } from 'react';
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```cpp filename="hi.cpp"
    #include <iostream>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```c filename="hi.c"
    #include <stdio.h>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```c filename="hi.c"
    #include <stdio.h>
    ```
  </Tabs.Tab>
</Tabs>

<Features />

The name “SWR” is derived from `stale-while-revalidate`, a HTTP cache
invalidation strategy popularized by
[HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). SWR is a strategy to first
return the data from cache (stale), then send the fetch request (revalidate),
and finally come with the up-to-date data.

<Callout emoji="✅">
  With SWR, components will get a stream of data updates **constantly** and
  **automatically**.

And the UI will be always **fast** and **reactive**.

</Callout>

<div className="mb-20 mt-16 text-center">
  [Get Started](/docs/getting-started) · [Examples](/examples) · [Blog](/blog) ·
  [GitHub Repository](https://github.com/vercel/swr)
</div>

## Overview

```jsx
import useSWR from 'swr'

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

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

```diff
import useSWR from 'swr'

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

-  if (error) return <div>failed to load</div>
+  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

In this example, the `useSWR` hook accepts a `key` string and a `fetcher`
function. `key` is a unique identifier of the data (normally the API URL) and
will be passed to `fetcher`. `fetcher` can be any asynchronous function which
returns the data, you can use the native fetch or tools like Axios.

The hook returns 2 values: `data` and `error`, based on the status of the
request.

## Features

With just one single line of code, you can simplify the logic of data fetching
in your project, and also have all these amazing features out-of-the-box:

- **Fast**, **lightweight** and **reusable** data fetching
- Built-in **cache** and request deduplication
- **Real-time** experience
- Transport and protocol agnostic
- SSR / ISR / SSG support
- TypeScript ready
- React Native

SWR has you covered in all aspects of speed, correctness, and stability to help
you build better experiences:

- Fast page navigation
- Polling on interval
- Data dependency
- Revalidation on focus
- Revalidation on network recovery
- Local mutation (Optimistic UI)
- Smart error retry
- Pagination and scroll position recovery
- React Suspense

And a lot [more](/docs/getting-started).

## Community

<p className="mt-6 flex h-6 gap-2">
  <img alt="stars" src="https://badgen.net/github/stars/vercel/swr" />
  <img alt="downloads" src="https://badgen.net/npm/dt/swr" />
  <img alt="license" src="https://badgen.net/npm/license/swr" />
</p>

SWR is created by the same team behind [Next.js](https://nextjs.org), the React
framework. Follow [@vercel](https://twitter.com/vercel) on Twitter for future
project updates.

Feel free to join the
[discussions on GitHub](https://github.com/vercel/swr/discussions)!
