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

🚨 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

[@dalestewart]

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

[@electricindro2236]

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

[@jacob_dmn]

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]

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

[@user-hb6yb6bu8n]

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

[@eliuddyn]

Sonny The Master 🔥🔥

[@ludanjubara]

Nice one!

[@supercrunch3367]

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

[@diegounanue]

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?

[@alejandromartinezramirez3312]

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

[@victorlongon]

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

[@surendrajat7290]

nice video

[@lukeskywalker7029]

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?

[@RegalWK]

it will feat well with trpc called from serverActions

[@Ashish-_-]

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

[@fatcat3513]

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

[@mikhaelhermanus5301]

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

[@dream__moments]

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]

The UI will rollback the change

[@dream__moments]

@@HorizonHuntxr thanks

[@pouyajabbarisani]

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

[@dataSMASH]

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

[@appstuff6565]

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]

its basically what you are asking for

[@rodzadra]

What about MeteorJS?

[@LuisVazquez-ky7yb]

what will happened if the endpoint is down?

[@drivebuss8079]

very narrow and small use case!!

[@adarshrathi8265]

colourfull light degrade your personality