Learn the useOptimistic Hook in 19 minutes (Next.js 13 For Beginners)

Рет қаралды 15,680

Күн бұрын

🚨 Join my course Zero to Full Stack Hero: www.papareact.com/course
The useOptimistic hook provides a way to implement OPTIMISTIC updates. These Optimistic updates enhance the user experience by making the app appear more responsive to the user by displaying instant results on the front end.
🔴 LOOKING FOR THE CODE FROM THE BUILDS? 🛠️
links.papareact.com/github
📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Introduction
00:14 Explaining Optimistic Updates
00:48 useOptimistic Demo
03:25 Explaining the useOptimistic Hook Demo Integration
04:41 Explaining the Backend Integration
05:52 Building the Frontend for the useOptimistic Demo
07:11 Implementing a Simple Counter
09:34 Implementing the useOptimistic Hook
10:38 Simple Counter vs Optimistic Counter
11:24 Building and Explaining the Optimistic Counter Component
16:12 useOptimistic Demo & Explanation
17:58 Bonus Tips & Tricks
19:06 Outro
Let’s get it PAPAFAM 🔥.
#nextjs #reactjs #serveractions #tutorial #javascript #beginner #webdevelopment #tailwindcss

Пікірлер: 28

@electricindro2236 8 ай бұрын

Brilliant explanation! Please keep such tutorials coming. Lot of new things to learn from you. 💗

@dalestewart 9 ай бұрын

I definitely will be using the optimistic hook in my own personal projects

@user-hb6yb6bu8n 9 ай бұрын

Sonny, Can you make a video about background vs on-demand revalidation?

@jacob_dmn 5 ай бұрын

Thank you, Sangha, I knew you since I started web dev and I'm still watching you, it's weird that sometimes we have friends that we're not aware of, anyway, wanted to take a moment to be grateful for everything that impacted my life, including your content

@tauqeerhusain7521 9 ай бұрын

Big love sir for every video you trained me a lot ❤❤❤❤❤❤❤❤❤❤

@supercrunch3367 9 ай бұрын

What if you need the ID response from the backend? Or should the frontend generate the ID?

@ludanjubara 9 ай бұрын

Nice one!

@eliuddyn 9 ай бұрын

Sonny The Master 🔥🔥

@alejandromartinezramirez3312 9 ай бұрын

Amazing, ey bro could we have an example how to create pdfs and download them?

@diegounanue 9 ай бұрын

I’m starting with nextjs. Please help does it needs a state manager? When you import a client side component into a server side? The server side html is rendered in the server and the imported client component in the client?

@victorlongon 8 ай бұрын

What create and api endpoint if you are already using server actions? The main idea with server actions is exactly to eliminate this middle lawyer when taking to the backend

@RegalWK 8 ай бұрын

it will feat well with trpc called from serverActions

@surendrajat7290 9 ай бұрын

nice video

@fatcat3513 9 ай бұрын

Hey Sonny can we get a CRM Hubspot clone...?

@lukeskywalker7029 9 ай бұрын

So if I grasp server actions with optimistic updates correctly, there is no need for useSWR anymore? unless interacting with a returned stream, which is why Vercel still uses it in their AI SDK?

@mikhaelhermanus5301 8 ай бұрын

Is there any way to use it on react native ??

@Ashish-_- 3 ай бұрын

One doubt: Am I correct that incase the API fails. the revalidateTag will take care of changing value to the previous value?

@dream__moments 9 ай бұрын

What if the server failed with 500 error for that reqst and the optimistic update took place. Then there will be anomalies between server and local state value ??? Please answer this I am facing during Favourite a item

@HorizonHuntxr 9 ай бұрын

The UI will rollback the change

@dream__moments 9 ай бұрын

@@HorizonHuntxr thanks

@dataSMASH Ай бұрын

Anyone know how to set the type in useOptimistic? Both values default to ANY

@pouyajabbarisani 7 ай бұрын

I'm trying to write test for useOptimistic using jest, but it says "TypeError: (0 , react_1.experimental_useOptimistic) is not a function" :(

@appstuff6565 7 ай бұрын

hey there Sonny, thanks for this. is there a optimistic setState ? I have a list of items with adding functionality and when i want to rearrange them, i am confused. Any advise or help or guidance is appreciated. :D Thanks.

@darshandhabale143 5 ай бұрын

its basically what you are asking for