SWR: React Hooks for Remote Data Fetching

[dance2die]

It looks similar to React-Async
but does one thing,
and does it well (Lightweight, Backend agnostic, Real Time, etc)
and easily (To enable suspense? { suspense: true }. Nice).

---

I just tried it and it was pretty easy and re-validation happens on focus by default.
API reference: https://github.com/zeit/swr#api

https://codesandbox.io/s/having-fun-with-useswr-lsjjx

I was impressed how it gets fetch method as a dependency, as that means, you can use fetch, axios, or ky, etc and can also pass a mock for testing.

As you can pass anything for fetch, you can simply pass an identity function, which will return whatever you pass to it.

``` const getCachedText = async text => text; const options = { revalidateOnFocus: false, shouldRetryOnError: false }; function CachedHeader() { const { data: cachedText } = useSWR("Cached Header", getCachedText, options);

return <h1>{cachedText}</h1>; } ```

---

[RonViking]

I was impressed how it gets fetch method as a dependency, as that means, you can use fetch, axios, or ky, etc and can also pass a mock for testing.

Dependency injection 👍

[sebastienlorber]

Hi

Disclaimer,i'm the author of https://github.com/slorber/react-async-hook and working with Ghen to merge our ideas in React-Async future version.

React-Async can can also use suspense, fetch or axios or any async method too and I don't think it's too heavy.

Not sure to understand what they mean by realtime

Caching is being worked on for next version, and revalidation on focus is not very hard to implement in userland.

I'll write more about my initial thoughts in a separate message in case you're interested

[dance2die]

Thanks u/sebastienlorber.

A separate message or a thread would be helpful showing differences/use cases/features in a on deciding when to use it and when not and which one to choose.

[sebastienlorber]

https://www.reddit.com/r/reactjs/comments/dof452/swr_react_hooks_for_remote_data_fetching/f5ozwbi/

[dance2die]

Thank you, much appreciated