React 19 is FINALLY Here! Major Changes You Should Know

hey everyone today we are taking a look at something super exciting react 19 is officially out and stable in this video I'm going to walk you through all the highlights you need to know from the react 19 release announcement think of this as a friendly overview rather than a deep dive so you will get a sense of the new features and improvements without getting too Lost In The Weeds I also want to give you an update on the next year's 15 course that most of you have been waiting for let's begin one of the additions

in react 19 is the introduction of what react calls actions these are functions that you can pass around to handle data mutations things like updating a user's name with an API call without having to manually manage loading States errors and optimistic updates every single time in previous versions you might have had a bunch of State calls to handle is pending error and so forth with actions you can use asynchronous transitions that automatically handle the pending state for you they also made it easier to handle forms you can now pass a function directly to the action

prop of a form element when the form submits it will automatically handle pending States and even reset the form on success combine that with the new hooks like use action State and use form status and you've got a much neater pattern for forms and data mutations no more repeative boiler plate for loading Spinners or error States in every single form component another new hook use optimistic lets you show changes right away before the server confirms them for example if a user updates their name you can display the new name immediately and then gracefully handle the

server response once it arrives you can also revert if necessary next up react 19 introduces a new API called use now use is not a hook in the traditional sense but you can call it in your render function to unwrap promises or other resources essentially if you use encounters a promise react will automatically suspend until it is resolved this can make it a lot simpler to deal with async data fetching and suspense boundaries and unlike hugs use can be called conditionally react 19 also introduces two new apis in react Dom pre-render and pre-render to node

stream these new apis allow you to generate static HTML that waits for the data to be ready it is a step towards making static side generation more flexible and Powerful server components continue to mature with react 19 they let you pre- render components on the server either at build time or on demand and then hydrate them seamlessly on the client this release stabilizes many of the server component features that have been evolving in the canary Channel similarly server actions now allow client operations to trigger functions that run on the server with the use server directive

these functions get called remotely making it it easier to handle serers side logic without writing a ton of boilerplate code it is all part of react's bigger push towards a full stack hybrid rendering model react 19 is also loaded with lots of smaller quality of life improvements you can now access ref as a prop in function components this means you no longer need forward ref in many cases there's a Code mod coming to help you transition your code base hydration errors are now more understandable react will give you aing single more detailed message rather than

multiple cryptic warnings helping you debug SSR mismatches much faster instead of context. Provider component you can now just render context directly for providing context values cleaner and much simpler your ref callbacks can now return cleanup functions this makes it simpler to manage what happens when a ref based element is removed use deferred value now supports an initial value letting you specify what gets shown before the Deferred value arrives finally react 19 lets you place title meta and Link tags directly in your components react will figure out how to hoist them into the head tag for

you this means you can Define page titles authors and stylesheets write where you use them and react ensures they appear in the correct place so that is react 19 in a nutshell from actions and simplified form handling to the new use API better server rendering capabilities improved eror reporting and richer support for metadata Styles and scripts this release aims to make react apps faster cleaner and more intuitive to write there are a few more details I've left out from this video so please feel free to go through the blog if you're ready to dive in

the react team has an upgrade guide to walk you through the process the best practice is to follow that step-by-step test thoroughly and take advantage of their code mods now about the next year's 15 course I mentioned at the start I'm happy to say that it is shaping up to be the most comprehensive next year series you will ever come across the first video in that series drops on January 1st so make sure you're subscribed to catch that one and now with react 19 fresh on the scene I think it is the perfect time to

kick off a brand new react tutorial series as well the current react playlist on the channel has already hit an incredible Milestone of close to 39 million views and I'm hoping the next series focused on react 19 will be just as impactful and helpful for all of you keep an eye out for that in 2025 but I would love to hear from you what technologies are you looking forward to diving into in 2025 and what technologies are you hoping to learn from this channel drop your thoughts in the comments below thanks for watching and I'll

see you in the next one