NEW React 19 Changes Are Amazing!

FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
It has been quite awhile since React 18 and there have been a ton of experimental features added to React since then. Luckily, React is finally getting ready to release these features as stable with version 19 coming sometime this year. In this video I will share with you everything you need to know about the 7 best features coming to React 19.
📚 Materials/References:
FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:32 - #1 - Compiler
02:01 - #2 - Actions
04:28 - #3 - "use server" & "use client"
05:14 - #4 - SEO
05:55 - #4.5 - Suspense Head Loading
06:43 - #5 - Web Component Support
07:19 - #6 - ref Prop
07:40 - #7 - use Hook
#React19 #WDS #ReactJS

[@babatundetaiwo5184]

Frontend is the most unstable stack ngl

[@Sai648]

As a Frontend Developer, I agree with you. But, to be honest, it is a lot of fun to see the code you write in your editor work like magic on the browser. It is very satisfying! :D

[@babatundetaiwo5184]

@@Sai648 Very wonderful, I focus more on the backend this days. But comparing it to my previous experience where I use to work with embedded system I prefer it. With embedded systems you can test your code efficiently till you compile it.

[@cosminmocanu5254]

i wanna switch to backend or smth cuz i just cant cope anymore. 50 new frameworks every day, changes to existing ones everyday. I'll just go crazy someday if I keep this up 😅

[@babatundetaiwo5184]

@@cosminmocanu5254 just the other day I did something with Nexjs 13 next day 14 is out. Frontend is just so unstable

[@Hipstergramm]

@@cosminmocanu5254 just stay on a react 14 framework and you wont need to upgrade anymore

[@cliftonbeale2945]

Liked & Subscribed for the video alone. The free course is insane, you are the goat.

[@aliplaysgtr]

Thanks for the summary dude!

[@tigranpetrosyan144]

As always, top content! Thanks

[@Happyendrew]

seven words in support of this channel!)

[@user-rm1dp1hk7u]

Happy Birthday! Your dedication to sharing knowledge is inspiring, and I wish you a year filled with continued success and fulfillment in your endeavors. 🥳🎈🎁

[@aliuabdulmanaf353]

Thanks for the update

[@sairagulamali9018]

thanks for the excellent content!

[@aaronely759]

You are awesome, thank you for the content.

[@YouDJeuR]

Wow thanks for the update

[@rustee_nyfe]

That's really something important. Thank you

[@mauriciomueller86]

Great content, I really love all ur videos man! Do you know when React 19 will reach a stable release, suitable for us to update our existing projects?

[@omkareswararao9779]

Great explanation Always... Thanks 🙏 Bro

[@TubelatorAI]

0:00 1. Introduction 🌟 Overview of React version 19 changes and importance. 0:29 2. React Compiler 🛠 Introduction of a compiler in React version 19 for automatic memoization. 2:02 3. Actions & Directives ⚙ Exploring actions, use client, and use server directives in React 19. 3:40 4. Use Optimistic Hook 🔄 Understanding the use Optimistic hook for Optimistic updates. 4:09 5. Real-Time Like Feature Immediate display of likes before server submission. 4:28 6. Client vs. Server Directives Differentiating code execution in Next.js. 5:15 7. Document Metadata Handling Dynamic insertion of metadata in React components. 5:55 8. Enhanced Suspense Functionality Improved loading control for styles and scripts. 6:49 9. Web Components Compatibility Better integration with React 19 for web components. 7:22 10. Refinement in React Hooks Elimination of forward ref usage with new implementations. 7:41 11. Introduction of 'use' Hook Advanced asynchronous capabilities for loading and running tasks. 8:27 12. Conclusion & Updates Wrap-up of React 19 changes and course recommendations. Generated with Tubelator AI Chrome Extension!

[@by6973]

thank you

[@liridongashi2616]

Thank you❤

[@yassinebenazouz4529]

the new use hook is 🔥🔥

[@simo_64]

Thanks bro

[@andremazetto]

Thanks!

[@WebDevSimplified]

You're welcome!

[@jasonzamora3618]

GOT DAMN IT! Just as I learn something, they drop something else. My prediction: As developers, we're gonna have to get that neurolink gear to keep updated with the continuous flow of features, upgrades, and new-ness that never ceases or slow.

[@rishiraj2548]

Yes😢😭

[@milanfanas]

Soon AI will create the ultimate programming language. It will be the same for frontend, backend, games, appliances... and we will miss the times when we had to learn everything from scratch every 6 months

[@emgodas]

Fr just started to get into react next day boom react 19

[@IlyesCodes]

Welcome to web development realm 😂

[@aerofred2002]

Welcome to the club. Some of us have been around since "Class components." Imagine learning that and then "hooks" are introduced. At least these changes aren't that groundbreaking.

[@salmanpatrick]

React blurring the lines between itself and svelte 🔥. Now we cooking

[@ontheruntonowhere]

Itsvelte.

[@adityaanuragi6916]

I honestly like that, react has competition in terms of dx so it'll actually improving

[@YGaming18]

Thanks 🙏🏼

[@whatscooking104]

THIS IS A GAME CHANGER

[@Danielo515]

I find fun how they phrase it: "our vision is...", "WE were not satisfied". Man, taking inspired is good, give credit where credit is due

[@riajikbal2938]

New features are amazing 🎉

[@celloninja]

And here I am just finishing the section of your React course that deals with the memo functions... lol

[@adev_312]

Welcome to web development! lol

[@celloninja]

@@adev_312 😂😭

[@himanshusingh694]

And that's fine.. even I go through old hooks videos to refresh my understanding 😊

[@nivethan_me]

you'll probably won't work on React 19 anytime soon as a professional. we still have code bases with React 16.8

[@viallymboma9874]

And he has made money from you purchasing the course that's getting deprecated gradually...😂

[@aymenbachiri-yh2hd]

Thank you

[@nileshvidurangahemachandra4481]

Huge Kyle W moment. Like always

[@AlexandrePaiva308]

and there's still nothing about making the states management easier without using external libraries... I can't understand why they don't focus on it as that would be a huge improvement for React development !

[@DhruvRed]

For majority of react applications doesn't require any state managament library, unless your application is too complicated, the state management should always be kept simple. I have seen many projects where they didn't need redux but they are using it anyway

[@aero6927]

Use contexts?

[@alonsojimenez7487]

You can mimic the same functionality that Redux has with Context and useReducer. It works very good. The only thing that maybe is better in Redux is the rxJS implementation, but you can always do it yourself

[@chinmayghule8272]

@@DhruvRed I'm learning Redux right now and it's a nightmare! The level of abstraction in it makes my head hurt.

[@ziadxcode]

react compiler is amazing, I always get confused about thinking of useStates re-renders

[@SLRModShop]

skill issue

[@soberstudy160]

It perhaps is, but for new people who are learning a compiler that does everything for you might not be the best thing. Does it mean that you can't use useMemo etc. anymore with this new compiler or can you just like opt out?

[@SambaDoJaneiro]

@@SLRModShopNot using COBOL for web is the real skill issue.

[@ontheruntonowhere]

@@SLRModShop We're not all coding gods like you, Poindexter.

[@fifty-plus]

It's such a leaky abstraction, I don't think a compiler is the right word choice as the role of a compiler isn't to fix footguns that the language introduces. It's good to have the optimization step but the double render and all the footguns are more problematic than hiding them in a compile step - it's the simplest path than fixing the abstraction though so it was an easier choice for them I'm sure.

[@Tommy-jn9ps]

Been here since like 50k subs bro the early videos like flexbox css, stories of how you got your first job with the suit and all and stuff like this that helped me to where i am today with a promising career. I wanted to thank you from the bottom of my heart, you were the only youtuber who helped me understand everything clearly and for that i cannot thank you enough.

[@FreakyLordSWatchingU]

Still no fix to hydration colliding with most browser plugins?

[@elvispalace]

excited

[@deimne970]

Every day it seems more Svelte :)

[@codesymphony]

surprised it took this long

[@xgcwrought3346]

The more I use react the more workarounds I use.. that being said I really like this update this really makes things alot easier.

[@danabc322]

I’m interested in the hooks course, but only if it’s free! 😂

[@iamcasted]

I don’t like direction React is heading in… use hook adds so much abstraction and ambiguity, it even breaks react rules. Writing server code in client code is also really unintuitive & breaks separation of concerns. It even breaks normal html by changing how action attribute works

[@tomstickelaz]

React was ok in 2019. I built a decent app but axios can't touch rxjs in angular. I been on dozens of angular and React projects and while angular is not perfect. React abstraction has become a nightmare as several places with front end gurus struggled to figure out all the insane layers of abstraction that someone else wrote. It's horrific. I will take web forms over Reacts current nightmare abstraction. It's not enjoyable

[@chrisfelicien]

React look like next js now Thanks Kyle

[@everythingisfine9988]

Thinking the same thing. Not sure if Next.js provides enough value in switching over. Especially because of Reacts market dominance

[@Pareshbpatel]

Thanks for keeping us informed, Kyle This time on the features of React 19. {2024-03-16}

[@regime5070]

the title link and use hooks and useOptimistic hooks are verry good

[@user-by6yl4ps4e]

Thank you for the thorough update! Like always ur channel always add so much! I have just one question: In your opinion, do you think it will be easy to migrate from React 18? Currently, I am running React 18 compiled with Create React App. I attempted to transition to Vite for more efficient compilation, but it has been problematic, so we are sticking with what we have now. Do you think this will pose a problem when we decide to upgrade to React 19?

[@shogunkodogun]

first of all let go of CRA, even react team isn’t working on it for months. Yes React 19 will be easy to migrate to because it is essentially less React to write

[@user-by6yl4ps4e]

@@shogunkodogun yeah i tried but to migrate the current project to vite is a nightmare, so I'm wondering if it'll be the same for react 19

[@adityaanuragi6916]

​@@user-by6yl4ps4eit's mostly gonna be easier I think cuz you're mostly removing stuff rather than adding, like removing the forward ref stuff and the useMemo stuff Changing the context api to use hook could be tricky but I feel react docs is gonna have something for you or a cli to migrate, though I could be wrong

[@ChrisPalmer-hw2xb]

could you add the link to these React docs ?

[@user-ml1bl4gv6j]

i guess all left for next js is the SSR with server components and the routing system structure

[@sarcasticdna]

Next JS is fucked up after v13

[@joemart6887]

Where is the forwardRef and use hook change they supposedly added? They're not on the latest blog, where do they exactly state they change these 2?

[@kirillzlobin7135]

When are they going to release it?

[@user-ko1cw6mv4q]

Omg Kyle ❤❤😮

[@yorox2515]

If react is getting an update and we use react in the next js then does it mean we are also getting rid of these hooks in the next.js too??

[@tootyrnt5533]

May be a dumb question, but would we still need a module bundler or JavaScript transpiler since we have a compiler now?

[@karimkrimou399]

Excellent beo

[@samael1864]

Спасибо! Отличные новости!

[@SithLordBishop]

React hooks was a huge step back for me. Glad to see they are working to correct some of that.

[@rdubitsk]

Does react 19 reduce the need for next.js?

[@chair6180]

How does this affect react native Android/iOS/web?

[@Emerald13]

So.... they wont need that recommendation anymore to use a framework like next?

[@mhslab3947]

Do you update your past premium course with this update?

[@WebDevSimplified]

Yes. Currently there is nothing to update as none of these features are stable and I already have many of these features in my React/Next courses

[@eyeCU13]

Does react native have a compiler as well, or is this just for react?

[@konstantinpaul8301]

Did you do or planing on make a video for HTMX? I think this could be bebefical especially for "younger" developers who are not aware of Hypermedia and RESTful API

[@nxshipon6470]

Always love Form Bangladesh 🇧🇩🇧🇩

[@hasibulhasankhan8350]

বলদ কোথাকার

[@tkay42]

Is React with this stil a light weight libary, or do we have to call React now a full Framework. And if so, for what reason, should I chose React over Angular and Vue.js?

[@ezwtwrziehag1736]

nothing wrong with using the usememo etc. hooks. they are easy to comprehend.

[@SonAyoD]

great

[@rendivs925]

Cool

[@diegommiranda]

Does this apply also to React Native?

[@bernardoolisan1010]

No, they are different frameworks

[@sedhain_pankaj]

Felt like they are back porting nextjs into react. Compiler is cool though.

[@kamalkamals]

react team inspire from other frameworks like svelte

[@kanways8]

seems like react becoming svelte. svelte becoming react with new svelte 5

[@rostombaouchi8749]

i really like your content, much appreciated, but please, the way you talk and say no with your head at the same time gets me everytime

[@ILoveAmerica1123]

Worth it to learn and master? Thoughts and comments appreciated.

[@flygonfiasco9751]

Did react just graduate from library to framework?

[@zedricktorres]

That just makes me think that Nextjs is THE React framework...

[@Kraykz]

Awesome summary, thanks! Can you reduce the head shaking though? It's making it harder to focus on the main content..

[@raisulislam6356]

🎉🎉🎉

[@Manpreetsingh-ni3kx]

what about devin?

[@hnchanhk]

Should I still use next.js with React 19?

[@codesymphony]

yes

[@planesrift]

Yes but when

[@tumbleweed_wagon2113]

Holy shit.

[@flamrdevs]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@theshtig4218]

What's the point of next js now?

[@jozekuhar2895]

It's probably more relevant than ever because some of the features like "use server" / "use action" can only be used with framework (not necessary next, of course).

[@Alex-mi6xc]

Is it now better to use react then next.js?

[@everythingisfine9988]

2nd this question 👆

[@shaunniel02]

3rd this question

[@ooijaz6063]

next is a react framework... you can't use next without react next gives you opinionated way working with react (routing, image, font additional features, ssr, etc)

[@rand0mtv660]

Just keep using Next.js if it makes sense for your project. Next.js gives you quality of life features such as file system routing, server side rendering if you need it, image optimization, code splitting and much more. If you don't care about any of those, then just don't use Next.js.

[@nicolasguillenc]

Wow a compiler! I wonder who had that amazing idea how did no one think of that before?🥴 - Vue, Svelte, Qwik:🗿

[@everythingisfine9988]

It's faster for all the millions of apps that have been created with React to be upgraded versus rewriting in a different framework... Yet, I still love svelte ❤️‍🔥

[@StephanHoyer]

It's not an amazing idea, it's workaround for a flawed concept. React changes fundamentally with every 2 majors, something massive must be wrong, don't you think?

[@SilvestreVivo]

React wants to be like Svelte

[@asiacuisine4869]

Just use Vue or Swelte. React is so much behind other frameworks in innovations.

[@appwala3728]

When I changing the video orientation in your website it's automatically set the video quality to maximum (1080p). But I want if one time I set this to 360p than it should stay always 360p. It's automatically reset. I know what the problem. I also can fix this. But I know you also can do this. Thank you

[@germantoenglish898]

Are actions becoming a "stable" or "staple" part of React?

[@germantoenglish898]

ah...ok..both I think. A stable version that will become a staple part of React.

[@hasanbasri5692]

So...when will React 19 released?

[@andgoedu]

👌👌👌

[@ElatedBlue]

I hated forwardrefs, so good to see them going away entirely!

[@josersleal]

Define compiler. Or is it again hijacking terms to look smart?

[@alexandervashchuk7795]

The best part is killing optimization features Less is better

[@bibahbibah5108]

great with React 19 code is more natural and easy to write, for me as client side react developer my life is better 😂 and simple

[@Vishal_0841]

Can you please make a React video

[@WaliaIbex]

Are you telling me they did nothing about the reacts garbage way of global state management ? 😮

[@KermitDominicano]

Ah shit, here we go again

[@memaimu]

That’s great! Ahh, but now all my dependencies are broken… And I hear React 20 is just around the corner. But I might consider other upcoming technologies such as Javasplit, Fastyfast, and NuJS.

[@androiduseronappledevice4477]

Best comment 🤣

[@liv6646]

react turning into vue lol

[@rjwhite4424]

Keeping up to date with React Router might be the most annoying thing ever. They make new changes and deprecate old stuff so much

[@ruggeddog3103]

better then 100 seconds of crap!

[@Nexus9997]

If react compiler is integrated without breaking changes, the framework is here to stay forever until something revolutionary is made (recent frameworks are not)

[@MrMatruskan]

These changes just make me want to keep using plain JavaScript

[@Desperoro]

Me too, but my project is now in React :-/

[@MrMatruskan]

I’m sorry, bro. I know how you feel, I’ve been there too.

[@darrenhwang900]

Use use use, used

[@algorif4715]

EARLY