DEV Community

Discussion on: "useSWR" - React Hooks for Remote Data Fetching

Collapse
 
dance2die profile image
Sung M. Kim

As I am also a noob at useSWR, I just tried to explain as much as I know :p

I would normally do this with useEffect

Yes. One would normally use useEffect by default to fetch data (as it's a side effect).

useSWR would ease the burden of having to write much boilterplate code.

useSWR is using useLayoutEffect over useEffect (, which I'd like to know the reason behind it).

github.com/zeit/swr/blob/a323fa702...

thinking out loudly:

Maybe this article by Dave Ceddia would provide an answer.

When to useLayoutEffect Instead of useEffect

Is the main benefit the support for suspense?

It's only one of the nice features :)

The main benefit is hidden in the name, SWR

SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

Basically not showing "loading" screen as soon as a data is being fetched/refetched.

That sounds a bit like Pending → Skeleton → Complete Concurrent UI pattern in the experimental channel (but not sure if they are the same).

You can also do optimisitic UI update using mutate, meaning, you can show updated state right away before getting remote data. And revert if the change was not made.