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!
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
@@AbhishekSatyavolu 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.
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 😅
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
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
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.
Happy Birthday! Your dedication to sharing knowledge is inspiring, and I wish you a year filled with continued success and fulfillment in your endeavors. 🥳🎈🎁
great Review of the new functionalities of React, the memoization was the first big problem for an UI based on states. for those who will get confused about the word "build"... normally when you "build" a sintaxe you are translating it to binary code to be interpret by the architeture of the target machine, but in the case of fontends, we are talking about converting one sintaxe into another, it is still script but better. it is still vanilla js script
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?
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.
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.
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
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.
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 !
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
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
@@DhruvRed you are completely right here. One example is redux, completely over used, devs don't realise that 90% of time they don't need any state management lib. For me react context for basic global state and react-query for api response caching worked really well and never needed to use the redux.
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?
So in oficial documentation for react compiler still writes: "React Compiler is a new compiler currently in Beta, that we’ve open sourced to get early feedback from the community." So do we have React compiler in React 19 or not ? I am confused.
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?
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
@@Mia-x3u7lit'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
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?
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 ❤️🔥
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?
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).
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
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)
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.
Wait wait wait kyle... are tou saying actions will simply just work in client co ponents without calling thw action in a onSubmit handler????? If so i will start jumping all over the place
Thanks!
You're welcome!
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!
thank you
generated code is not for pros bro
Liked & Subscribed for the video alone. The free course is insane, you are the goat.
🐐 😆
seven words in support of this channel!)
Frontend is the most unstable stack ngl
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
@@AbhishekSatyavolu 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.
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 😅
@@cosminmocanu5254 just the other day I did something with Nexjs 13 next day 14 is out. Frontend is just so unstable
@@cosminmocanu5254 just stay on a react 14 framework and you wont need to upgrade anymore
Thanks for the summary dude!
As always, top content! Thanks
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
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
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.
Happy Birthday! Your dedication to sharing knowledge is inspiring, and I wish you a year filled with continued success and fulfillment in your endeavors. 🥳🎈🎁
You are awesome Kyle!
And here I am just finishing the section of your React course that deals with the memo functions... lol
Welcome to web development! lol
@@adev_312 😂😭
And that's fine.. even I go through old hooks videos to refresh my understanding 😊
you'll probably won't work on React 19 anytime soon as a professional. we still have code bases with React 16.8
And he has made money from you purchasing the course that's getting deprecated gradually...😂
great Review of the new functionalities of React, the memoization was the first big problem for an UI based on states.
for those who will get confused about the word "build"...
normally when you "build" a sintaxe you are translating it to binary code to be interpret by the architeture of the target machine, but in the case of fontends, we are talking about converting one sintaxe into another, it is still script but better.
it is still vanilla js script
react compiler is amazing, I always get confused about thinking of useStates re-renders
skill issue
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?
@@SLRModShop We're not all coding gods like you, Poindexter.
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.
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.
Yes😢😭
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
Fr just started to get into react next day boom react 19
Welcome to web development realm 😂
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.
You are awesome, thank you for the content.
React blurring the lines between itself and svelte 🔥. Now we cooking
Itsvelte.
I honestly like that, react has competition in terms of dx so it'll actually improving
Thanks for the update
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
Thanks 🙏🏼
That's really something important. Thank you
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 !
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
Use contexts?
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
@@DhruvRed I'm learning Redux right now and it's a nightmare! The level of abstraction in it makes my head hurt.
@@DhruvRed you are completely right here. One example is redux, completely over used, devs don't realise that 90% of time they don't need any state management lib. For me react context for basic global state and react-query for api response caching worked really well and never needed to use the redux.
The more I use react the more workarounds I use.. that being said I really like this update this really makes things alot easier.
THIS IS A GAME CHANGER
React hooks was a huge step back for me. Glad to see they are working to correct some of that.
U didn’t continue using class components?
thanks for the excellent content!
the new use hook is 🔥🔥
Anyone noticed in 3.50 UA-cam like button flashing?
Wow thanks for the update
Great 👍 Kyle 🎉
Every day it seems more Svelte :)
surprised it took this long
Still no fix to hydration colliding with most browser plugins?
Thank you
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?
Thanks for keeping us informed, Kyle This time on the features of React 19.
{2024-03-16}
New features are amazing 🎉
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?
Thank you❤
Does react 19 reduce the need for next.js?
I’m interested in the hooks course, but only if it’s free! 😂
React look like next js now
Thanks Kyle
Thinking the same thing. Not sure if Next.js provides enough value in switching over. Especially because of Reacts market dominance
Great explanation Always... Thanks 🙏 Bro
the title link and use hooks and useOptimistic hooks are verry good
nothing wrong with using the usememo etc. hooks. they are easy to comprehend.
May be a dumb question, but would we still need a module bundler or JavaScript transpiler since we have a compiler now?
Huge Kyle W moment. Like always
So.... they wont need that recommendation anymore to use a framework like next?
i guess all left for next js is the SSR with server components and the routing system structure
Next JS is fucked up after v13
Does react native have a compiler as well, or is this just for react?
Thanks bro
how does use hook compare to tanstack useQuery? seems they do almost the same thing?
Awesome summary, thanks!
Can you reduce the head shaking though? It's making it harder to focus on the main content..
could you add the link to these React docs ?
So in oficial documentation for react compiler still writes:
"React Compiler is a new compiler currently in Beta, that we’ve open sourced to get early feedback from the community."
So do we have React compiler in React 19 or not ? I am confused.
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??
so I dont need to worry about any memoization hooks, unless I dont trust the compiler and insist on using them ! ? :D
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?
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
@@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
@@Mia-x3u7lit'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
Did react just graduate from library to framework?
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?
seems like react becoming svelte. svelte becoming react with new svelte 5
Worth it to learn and master? Thoughts and comments appreciated.
Wow a compiler! I wonder who had that amazing idea how did no one think of that before?🥴
- Vue, Svelte, Qwik:🗿
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 ❤️🔥
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?
Do you update your past premium course with this update?
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
What's the point of next js now?
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).
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
Should I still use next.js with React 19?
yes
When are they going to release it?
excited
Спасибо! Отличные новости!
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
react team inspire from other frameworks like svelte
Does this apply also to React Native?
No, they are different frameworks
what about devin?
That just makes me think that Nextjs is THE React framework...
How does this affect react native Android/iOS/web?
Felt like they are back porting nextjs into react. Compiler is cool though.
Is it now better to use react then next.js?
2nd this question 👆
3rd this question
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)
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.
Omg Kyle ❤❤😮
So...when will React 19 released?
Are actions becoming a "stable" or "staple" part of React?
ah...ok..both I think. A stable version that will become a staple part of React.
Just use Vue or Swelte.
React is so much behind other frameworks in innovations.
Yes but when
For me your videos run on 1.5x speed 😂😂 but they are cool for sure, Thanks kyle
Define compiler. Or is it again hijacking terms to look smart?
Excellent beo
Always love Form Bangladesh 🇧🇩🇧🇩
বলদ কোথাকার
great
I hated forwardrefs, so good to see them going away entirely!
Wait wait wait kyle... are tou saying actions will simply just work in client co ponents without calling thw action in a onSubmit handler????? If so i will start jumping all over the place
So React.js 19 is finally better than Next.js? Should I start using React again in my projects instead of Next? Please reply...
Cool
Are you telling me they did nothing about the reacts garbage way of global state management ? 😮
React wants to be like Svelte
The best part is killing optimization features
Less is better
Keeping up to date with React Router might be the most annoying thing ever. They make new changes and deprecate old stuff so much
These changes just make me want to keep using plain JavaScript
Me too, but my project is now in React :-/
I’m sorry, bro. I know how you feel, I’ve been there too.
Use use use, used
🎉🎉🎉
Even after all this, vanilla wins
👌👌👌