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

Пікірлер: 28

  • @jacob_dmn
    @jacob_dmn5 ай бұрын

    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

  • @dalestewart
    @dalestewart9 ай бұрын

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

  • @electricindro2236
    @electricindro22368 ай бұрын

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

  • @user-hb6yb6bu8n
    @user-hb6yb6bu8n9 ай бұрын

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

  • @tauqeerhusain7521
    @tauqeerhusain75219 ай бұрын

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

  • @supercrunch3367
    @supercrunch33679 ай бұрын

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

  • @diegounanue
    @diegounanue9 ай бұрын

    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
    @victorlongon8 ай бұрын

    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

  • @eliuddyn
    @eliuddyn9 ай бұрын

    Sonny The Master 🔥🔥

  • @mikhaelhermanus5301
    @mikhaelhermanus53018 ай бұрын

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

  • @lukeskywalker7029
    @lukeskywalker70299 ай бұрын

    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?

  • @alejandromartinezramirez3312
    @alejandromartinezramirez33129 ай бұрын

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

  • @ludanjubara
    @ludanjubara9 ай бұрын

    Nice one!

  • @fatcat3513
    @fatcat35139 ай бұрын

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

  • @dream__moments
    @dream__moments9 ай бұрын

    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

    @HorizonHuntxr

    9 ай бұрын

    The UI will rollback the change

  • @dream__moments

    @dream__moments

    9 ай бұрын

    @@HorizonHuntxr thanks

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

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

  • @RegalWK
    @RegalWK8 ай бұрын

    it will feat well with trpc called from serverActions

  • @surendrajat7290
    @surendrajat72909 ай бұрын

    nice video

  • @appstuff6565
    @appstuff65657 ай бұрын

    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

    @darshandhabale143

    5 ай бұрын

    its basically what you are asking for

  • @pouyajabbarisani
    @pouyajabbarisani7 ай бұрын

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

  • @rodzadra
    @rodzadra9 ай бұрын

    What about MeteorJS?

  • @dataSMASH
    @dataSMASHАй бұрын

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

  • @LuisVazquez-ky7yb
    @LuisVazquez-ky7yb6 ай бұрын

    what will happened if the endpoint is down?

  • @drivebuss8079
    @drivebuss80799 ай бұрын

    very narrow and small use case!!

  • @adarshrathi8265
    @adarshrathi82659 ай бұрын

    colourfull light degrade your personality