Exploring React 19 Features - use() Hook, Actions & More

In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks like useFormState(), useFormStatus() and useOptimistic().
Code:
github.com/bradtraversy/react...
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - / traversymedia
Instagram - / traversymedia
Facebook - / traversymedia
Linkedin - / bradtraversy
Timestamps:
0:00 - Intro
1:24 - Compiler Info (Slide)
3:05 - Automatic Memoization (Slide)
4:04 - use() Hook Info (Slide)
4:57 - use client & use server (Slide)
5:43 - Actions (Slide)
6:54 - useOptimistic (Slide)
7:40 - Metadata (Slide)
8:06 - Other Changes (Slide)
9:48 - React 19 Playground Intro
10:53 - use() Hook to Fetch Joke
15:34 - use() Hook to Fetch Posts
17:05 - use() Hook with Promise
21:16 - use() Hook with Context
23:32 - Action Example 1 - Post Form
29:25 - Action Example 2 - Shopping Cart Form
35:25 - useFormStatus()
39:49 - useFormState()
44:12 - useOptimistic()

[@philippearras8154]

Thank you Brad. All the work you do !

[@acidrifrancis15]

You guy are doing tremendous work. i love the way each and every project you drop is giving us insight.

[@webdevluc]

Great video Brad. Thanks for making and sharing it

[@shubhamsingh-vv7tr]

I think it covered all the stuffs, i think this the only video on youtube which have great content, other videos just making fool without understanding react19. Thanks brad❤

[@bogdanmarian3786]

Brad is the man! Thank you for your efforts and continuous learning materials!

[@r-i-ch]

Thanks for showing these all instead of the cursory review.

[@BijanProgrammer]

Thank you for this comprehensive video.

[@ceralguy85]

Great video Brad, thank you for always support the tech community by sharing this great content

[@haciendadad]

Great job on this video! Thanks Brad!!

[@stephenadeoye8370]

Thank you so much for sharing this.

[@skverskk]

Great new React features. And, great presentation with real example code.

[@psychodelic42]

you were the pilar of staring my journay of a web dev. Some time now I didn't came to your channel but I'm happy to see you are back in the game!! Lucking sharp mate, hope you are doing well !!!

[@devjourney8583]

this is great, thank you Brad!

[@abhaykumar9806]

Overall, great video. Worth watching. Thanks for sharing!

[@user-vc6nu1uj8y]

Thank you video Brad

[@yman_kh]

Great video Brad. Thanks for making and sharing it. Are you planning to update the react course on your website?

[@rudolfferenckovacs812]

Thank you Brad!

[@engsiyad]

I see a lot of Next js staff in the update. Thanks for the update brad.

[@eleah2665]

Brad is still the king. Over 2 million subscribers. Thanks.

[@munna5553]

You're are ahead of time😊😊

[@SaifulIslam-ql6eb]

I'm excited about react compiler.

[@Salah-YT]

thank u so much 🥰👍

[@asifahmed6568]

Thank you Brad

[@Faatihahmed]

Great video as usual. I hope i will my first dev app

[@handsoncoding7693]

Nice one Brad.

[@daljeetsingh5127]

Great video Thanks

[@nro337]

great video!!

[@avneet12284]

Nice. I see an example for useTransition in the repo. Would be nice to get a video on it if you get some time.

[@Racine14]

Thank you #travesy for this video.

[@martygo]

Awesome 🤩.

[@jameskirk5914]

brad the GOAT

[@XviSi0nplays]

eine der besten folgen seit langem

[@JohnReyBaylen]

Note: React.useActionState was previously called ReactDOM.useFormState in the Canary releases, but we’ve renamed it and deprecated useFormState. - From React Doc

[@2pacgamer]

Thx :)

[@doug774]

Awesome

[@alexdin1565]

Thanks for this videos as always best content please I have a question can we use Next Js with Django?

[@abdulsiyadnp]

Wow, this is a Gem.

[@larrytron1992]

I'm really looking forward to React 19. It'll be nice to revisit after spending so long with Next JS

[@elpolodiablo5486]

NextJS is built on top of React.

[@user-ru8hn9hb5c]

Woah man! You are the first one on KZbin to make a tutorial on React 19! You are the GOAT.

[@michaelcyber4584]

Great 🎉

[@manishkeer8338]

Thanks for the video, just have one question how we will handle error cases with use(fetch(...)) and suspense (for API calls)

[@ahmedchouihi]

Thanks Brad for the tutorial , but which course should I have read before this tutorial ? Can you mention one or more of the helpful videos ? Thanks and good luck

[@ziggyshea]

Minor thing, 13:09: Regardless of the use() hook, you wouldn't have to `return await res.json()`. (Unless you're using a try/catch)

[@abhaykumar9806]

At 33:20, why do you have a id in a input type hidden, when it can be passed from the prop value into the callback addToCart similar to title? I totally understand that you are trying to create an example to use formData inside a child component, but here it looks like an overkill.

[@_Blackwolf_01]

Thanks sir i'm currently learning your DSA course and it iz amazing

[@birsingh5388]

He always makes great videos

[@_Blackwolf_01]

@@birsingh5388 like hitesh sir

[@zaibali254]

Can you share link of this course

[@ceralguy85]

Brad there is an error related with a conflict between react-router-doom and react experimental version. Do you know which version of react-router-dom we need to install ?

[@brencancer]

Thanks for the effort sir, will React 19 affect React Native?

[@sanukjoseph]

💓

[@amiracademy464]

❤

[@vladoks7965]

Are you going to make Laravel course on Udemy?

[@tahirahmed9446]

Really need laravel course.

[@lucadifazio2735]

So what's the difference between form action and form onSubmit?

[@OCEMTechZone]

🎉

[@harsimothukuri155]

Brad u r my motivation

[@alvaro-escalante-naves]

How would you call the fetchData from an onclick event using 'use'?

[@PeterScream]

nothing wrong with the longer videos mate

[@WanKy182]

33:02 it doesn't look good creating hidden input in order to pass id to formData, why we can't just pass it as param?

[@Immelstorn]

In the first example hook use() triggers 4 times and i don't see a way to fix it. Am i missing something? Also to run the code you need to use yarn (npm isn't able to handle conflicts). And manually install experimental versions after it (you will get react/jsx-runtime errors without it)

[@jayantsharma2669]

I haven't tried this, but I have this question what if I only want to fetch the data only once, but on every re-render the use hook will fetch the data

[@lakshyarajdash]

Hey Brad I want you to make a video on MEAN stack. I want to make my portfolio website using MEAN stack.❤

[@Zeeshan-oi1vj]

Great video, skipping unnecessary part was good

[@skzahirulislam2820]

1st

[@CeezGeez]

14:33 lolol

[@cusematt23]

Does anyone know the "official" production release of react 19? Apols if i missed in video.

[@kim92se64]

24

[@QuadLead]

Laravel (:

[@abdosarmini]

Is it worth learning React while there are "better" ones like Vue.js and Svelte? It seems everyone hates React and Next.js.

[@yousufhossain9768]

next js is amazing what are you talking about

[@Chris-qg6kc]

What is the point of the react team pushing nextjs if they would continue to make updates? Next has eaten their lunch already

[@abhaykumar9806]

Funny, I tried to create a vite using typescript and I am not able to do `npm i -D @types/react@experimental @types/react-dom@experimental`. Any idea how can I do that @brad? When I specify the exact experimental version, I am only able to install the @types/react, but not @types/react-dom. And that is also not working

[@akoskm]

Hey, I think I can help you out here! I made a video about setting up React 19 with Vite, including the types! kzbin.info/www/bejne/npSWiIaEnZKBbNksi=Q8GePu8elPg8KDr3 let me know if you need more help with this!!

[@wanai9062]

You can view the comments for this file `types/react/ts5.0/canary.d.ts` on `@types/react`

[@akoskm]

There's an alternative way to add the canary version by going to the npm website searching for react, and picking a version with the canary tag. I made a short video about how you can do this: kzbin.info/www/bejne/npSWiIaEnZKBbNk

[@tomm5765]

The canary types are in the regular @types/react package to enable them modify your tsconfig.json and add "types": ["react/canary"]. Haven't tried with experimental, maybe just react/experimental

[@abdosarmini]

Is it worth learning React while there are "better" ones like Vue.js and Svelte? It seems everyone hates React and Next.js.