SWR the data fetching hero of ReactJS // 5 minute tutorial

Показать описание

In this tutorial we will look at why fetching data with useEffect is a bad idea even when only done on client side and how SWR can solve this and many other issues for you 🌹

Relevant Tutorials 🎥

-- Part of ReactJS TIPs for Professionals --
Members (no-ads 🌹, early release ⚡️, supported by you 🙏🏻):
Subscribers (free 🤗, scheduled release ⏱, use the notification bell 🔔):

🏷 #basarat #5MinutesOrLess #React #JavaScript #Tutorial #TypeScript

👇 ❤️ Subscribe for MOORE ❤️ 👇

**Feel Free To Read This Lot**

I'm Basarat, and I love helping developers. More about me:

Microsoft MVP for TypeScript
200K contributions on Stackoverflow. Top Contributor for TypeScript.
Book Author: Beginning NodeJS
Book Author: TypeScript Deep Dive
Creator of multiple hot ✨ed Github Open Source projects

Рекомендации по теме

Комментарии

I like how simple swr is but the way you mutate the state I feel that tanstackQuery might be better. I also like the fact that swr is a single package, you did the same for zod, you clarify a lot of things in these short videos. You are my favorite teacher 😁

ftnsco

thanks Basarat...so useful and timely. Just started a new nextJs project, and noticed the swr reference in the docs. Your vid helped me realize how it saves a network call from the usual 2 calls from useEffect😀

uquantum

i 'm a bit disappointed u didn't do the mutation part but anyway great video!

nested

I like the way you explain these things, thank you :)

muratasarslan

Great explanation. Simple Fast and to the point

KingOfCorinth

what if i export fetched data from SWR? and import in different component, like state managment? ...

idontknowWhatTosay

well done. that is all i can say. thank you

tube-rpnb

Thank you.

Are there any advantages when you compare SWR with react-query? They seem to perform similar tasks ☘️

noccer

Could also remove the React.StrictMode tags, but from what I have read the two calls only happens in dev, and not in deployment, but I have not tested it myself, though if that is true, I would go with having one less dependency.

MrSuperNova

Hello, the first argument is not the API endpoint I think but a unique identifier for the fetch. It can be anything.
Also, where is your fetcher function?
Thanks !

z_

By the way, strict mode is only enabled in development, so only one request will be sent in production.

ogreeni

The first argument in useSWR is the unique key to identify that data call right?

hollymolly

Hello, the first argument is not the API endpoint I think but a unique identifier for the fetch. It can be anything.
Also, where is your fetcher function?
‘Thanks !

z_

Strict mode checks are run in development mode only; they do not impact the production build

basharkhadra

SWR the data fetching hero of ReactJS // 5 minute tutorial

SWR the data fetching hero of ReactJS // 5 minute tutorial

This Could Be the BEST Way to fetch data from an API in React! | SWR Preload & Optimistic UI

Next.js Tutorial - 37 - SWR for Client-side Data Fetching

Why I Use Fetch (And Not tRPC / SWR)

Vercel wants you to fetch data like this

SWR/React-Query vs Fetch + UseEffect

UseSWR Tutorial - Remote Data Fetching in React

Data fetching in NextJs using SWR

My Favorite Way to Fetch Data in React

Data Fetch and revalidate with SWR

Eliminate Data Fetching Pain with React SWR

Next.js Data Fetching Technique - SWR ft. Axios - The nice way!

SWR для CRUD операций в React-приложении

An introduction to SWR - a React hooks for fetching data

SWR vs. Redux

Five Clever Hacks for React-Query and SWR

NEXT.js and SWR with Axios in 3 minutes

Why I love using SWR with ReactJs 😍 #short #react #shorts #developer #javascript #interview #best

Getting SSR to work with client side data fetching | Next.js

useEffect X SWR for fetching data

Complete Next.js Course for Beginners #19 - SWR

Complete Next.js Course for Beginners #24 - SSR with SWR

Learn useSWR hook with React and Next.js

How to fetch data from an API in ReactJS or NextJS