NEW React 19 Changes Are Amazing!
ฝัง
- เผยแพร่เมื่อ 11 มิ.ย. 2024
- 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
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
@@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.
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!
Happy Birthday! Your dedication to sharing knowledge is inspiring, and I wish you a year filled with continued success and fulfillment in your endeavors. 🥳🎈🎁
seven words in support of this channel!)
As always, top content! Thanks
Thanks for the update
Liked & Subscribed for the video alone. The free course is insane, you are the goat.
🐐 😆
That's really something important. Thank you
You are awesome, thank you for the content.
thanks for the excellent content!
Wow thanks for the update
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?
Great explanation Always... Thanks 🙏 Bro
the new use hook is 🔥🔥
You are awesome Kyle!
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.
Thank you❤
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.
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
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 bro
Thanks!
You're welcome!
Thank you
THIS IS A GAME CHANGER
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...😂
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
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?
@@SLRModShopNot using COBOL for web is the real skill issue.
@@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.
Still no fix to hydration colliding with most browser plugins?
New features are amazing 🎉
Huge Kyle W moment. Like always
Every day it seems more Svelte :)
surprised it took this long
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.
I’m interested in the hooks course, but only if it’s free! 😂
the title link and use hooks and useOptimistic hooks are verry good
React hooks was a huge step back for me. Glad to see they are working to correct some of that.
The more I use react the more workarounds I use.. that being said I really like this update this really makes things alot easier.
May be a dumb question, but would we still need a module bundler or JavaScript transpiler since we have a compiler now?
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??
excited
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?
When are they going to release it?
Does react 19 reduce the need for next.js?
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
@@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
Does react native have a compiler as well, or is this just for react?
Thanks for keeping us informed, Kyle This time on the features of React 19.
{2024-03-16}
So.... they wont need that recommendation anymore to use a framework like next?
Excellent beo
could you add the link to these React docs ?
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
How does this affect react native Android/iOS/web?
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?
Спасибо! Отличные новости!
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
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
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
so I dont need to worry about any memoization hooks, unless I dont trust the compiler and insist on using them ! ? :D
Worth it to learn and master? Thoughts and comments appreciated.
Awesome summary, thanks!
Can you reduce the head shaking though? It's making it harder to focus on the main content..
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).
nothing wrong with using the usememo etc. hooks. they are easy to comprehend.
Always love Form Bangladesh 🇧🇩🇧🇩
বলদ কোথাকার
Omg Kyle ❤❤😮
great
Did react just graduate from library to framework?
Cool
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.
Felt like they are back porting nextjs into react. Compiler is cool though.
Does this apply also to React Native?
No, they are different frameworks
seems like react becoming svelte. svelte becoming react with new svelte 5
That just makes me think that Nextjs is THE React framework...
what about devin?
Should I still use next.js with React 19?
yes
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.
Best comment 🤣
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
🎉🎉🎉
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?
Yes but when
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
👌👌👌
Holy shit.
So...when will React 19 released?
React wants to be like Svelte
Define compiler. Or is it again hijacking terms to look smart?
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.
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
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Are you telling me they did nothing about the reacts garbage way of global state management ? 😮
Just use Vue or Swelte.
React is so much behind other frameworks in innovations.
Ah shit, here we go again
I hated forwardrefs, so good to see them going away entirely!
Can you please make a React video
So React.js 19 is finally better than Next.js? Should I start using React again in my projects instead of Next? Please reply...
The best part is killing optimization features
Less is better
Use use use, used
I must be stupid. But I have to ask. "Running the form on the server" .... huh? Wouldn't a form always need to execute javascript on the client to do anything? My understanding was that "rendering on the server" meant generating all of HTML on the server. Not following how it would be possible to "generate javascript" on the server. But I am fairly new to this so maybe I am misunderstanding something basic.
I don't think forms need js actually so I think it can work on the server, I could be mistaken aswell but I'm pretty sure forms don't require any js
@@adityaanuragi6916thanks for the response. I’ll look into this.
@@cusematt23 looked it up and I can confirm that forms don't need js
You can try this yourself by disabling js and submitting a form, or just base html form with a method as get and you can your url on top change
@@adityaanuragi6916 thanks a ton. Really do appreciate.
@@cusematt23 no worries pal
Even after all this, vanilla wins
better then 100 seconds of crap!