How to use SWR in React Native - Fetch and Cache data (tutorial)

  Рет қаралды 5,678

notJust․dev

notJust․dev

Күн бұрын

Learn how to quickly fetch data in your React Native app with SWR, making your app faster and smoother.
This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: bit.ly/3TR8vQg
In this step by step guide, we'll be going over the simple yet powerful features of SWR, showing you how you can leverage features like real-time data updates, lightweight data fetching, cache and request deduplication, and much more. This video is great for both beginners and those who already use React Native and want to improve how their apps handle data!🚀
✅ Step-by-step Guide: www.notjust.dev/blog/swr-reac...
💻 Source Code: github.com/notJust-dev/SWR-Re...
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclas...
📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Introduction to SWR and its principles
- Setting up SWR in a React Native project
- Fetching data with SWR
- Implementing cache and revalidation strategies
- Real-time updates with SWR
- Optimizing data fetching with pagination and suspense
- Error handling and loading states
- Advanced SWR configurations and techniques
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/d...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro and what is SWR?
3:04 Starting the Tutorial - Setting Up
7:19 Installing SWR and Setting Up a Fetcher Function
13:56 Fetching data from a Public API
19:56 Rendering a List of Posts
26:58 Making Data Fetching Logic Reusable
33:48 Using a Custom Hook to Fetch User Data
50:50 Extracting posts to a separate screen
56:37 Configuring SWR Globally
1:08:31 Creating Mutations; Optimistic Updates
1:55:46 SWR Error Handling
1:57:03 Fetching GraphQL APIs & React Native Specific Configuration
2:17:44 Handling App Focus Events
2:42:37 Outro
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #SWR #reactnative

Пікірлер: 16
@Bianchi77
@Bianchi77 3 ай бұрын
Nice video, thanks :)
@notjustdev
@notjustdev 3 ай бұрын
Thanks
@mosdev1663
@mosdev1663 3 ай бұрын
Hi, thanks for your content which I've been following for a while and which has greatly helped me evolve on React Native in general. Could you teach us how to test our React Native code with Jest or something else for Typescript without Expo? It would be really interesting to develop our know-how. Thank you very much for everything you do 👍
@notjustdev
@notjustdev 2 ай бұрын
Hey, thanks for the appreciation! You can check out this blog post we made about testing with Jest and Testing Library: www.notjust.dev/blog/2023-01-16-react-native-testing
@TestYt4
@TestYt4 3 ай бұрын
With Apollo and swr which one u suggest please and is there main difference? Coz in your course u used Apollo.
@fransenson
@fransenson 3 ай бұрын
What zsh theme are you using there?
@mpumuropatrick4288
@mpumuropatrick4288 2 ай бұрын
Hi sir, i cannot get an account and admin api key on stepzen how could get them
@ginilmathew4412
@ginilmathew4412 3 ай бұрын
swr or tanstackqwery which one is best
@tomoJP
@tomoJP 17 күн бұрын
I think SWR is common on the web, but is it not so on mobile?
@SuperYoda7
@SuperYoda7 3 ай бұрын
I usually go with tanstack query and really like it. Is this an alternative?
@notjustdev
@notjustdev 3 ай бұрын
Yes, this is an alternative
@user-ct5zv1gg5z
@user-ct5zv1gg5z 3 ай бұрын
Sir please help me which one to choose react native cli or expo cli. I have build more than 7 apps in expo, but for large scale app I want to use react native cli what do u suggest ❤❤❤
@notjustdev
@notjustdev 3 ай бұрын
I would still go with Expo
@ibrahimkouma6751
@ibrahimkouma6751 3 ай бұрын
a quick question when building production app between tanstack vs swr which one do you suggest ?
@notjustdev
@notjustdev 3 ай бұрын
I haven't used SWR in production, but it seems pretty powerful
@TestYt4
@TestYt4 3 ай бұрын
With Apollo and swr which one u suggest please and is there main difference? Coz in your course u used Apollo.
Infinite Scroll in React Native: Pagination with FlatList
2:51:02
notJust․dev
Рет қаралды 14 М.
Let’s Build an AI Chatbot for Expo Docs: RAG Tutorial
3:12:29
notJust․dev
Рет қаралды 10 М.
бесит старшая сестра!? #роблокс #анимация #мем
00:58
КРУТОЙ ПАПА на
Рет қаралды 3,4 МЛН
Build a Local-First Finance app with Expo & WatermelonDB
3:58:46
notJust․dev
Рет қаралды 22 М.
Launch the Future App with notJust Incubator | Demo Day
59:49
notJust․dev
Рет қаралды 2,4 М.
Let’s build a Native Library using Expo Modules
2:59:22
notJust․dev
Рет қаралды 11 М.
Building the Ultimate Nike App in React Native & Redux
3:33:55
notJust․dev
Рет қаралды 154 М.
Build Flappy Bird with React Native: Skia & Reanimated Tutorial
3:20:38
Building an Apple Wallet Clone with React Native Reanimated
2:00:07
notJust․dev
Рет қаралды 7 М.
Building the Formula 1 App with React Native
3:58:45
notJust․dev
Рет қаралды 236 М.
Simple maintenance. #leddisplay #ledscreen #ledwall #ledmodule #ledinstallation
0:19
LED Screen Factory-EagerLED
Рет қаралды 19 МЛН
Собери ПК и Получи 10,000₽
1:00
build monsters
Рет қаралды 2,1 МЛН
Hisense Official Flagship Store Hisense is the champion What is going on?
0:11
Special Effects Funny 44
Рет қаралды 2,6 МЛН