Top 7 Exciting Changes in React 19 Explained Simply
Discover the seven key updates in React version 19 explained in a simple and concise manner. Learn about the new compiler feature and how it's set to revolutionize the way React works. Stay ahead of the game before the release!
Install Tubelator On Chrome
Video Summary & Chapters
1. Introduction 🌟
Overview of React version 19 changes and importance.
2. React Compiler 🛠️
Introduction of a compiler in React version 19 for automatic memoization.
3. Actions & Directives ⚙️
Exploring actions, use client, and use server directives in React 19.
4. Use Optimistic Hook 🔄
Understanding the use Optimistic hook for Optimistic updates.
5. Real-Time Like Feature
Immediate display of likes before server submission.
6. Client vs. Server Directives
Differentiating code execution in Next.js.
7. Document Metadata Handling
Dynamic insertion of metadata in React components.
8. Enhanced Suspense Functionality
Improved loading control for styles and scripts.
9. Web Components Compatibility
Better integration with React 19 for web components.
10. Refinement in React Hooks
Elimination of forward ref usage with new implementations.
11. Introduction of 'use' Hook
Advanced asynchronous capabilities for loading and running tasks.
12. Conclusion & Updates
Wrap-up of React 19 changes and course recommendations.
Video Transcript
Staying up to date with everything that's changing or react is incredibly difficult.
So in this video, I'm going to go through the seven main things that you need to understand about React version 19.
I'm going to make it as simple and quick as possible so you can get up to speed with everything you need to know before it even releases.
Welcome back to WebDevSimplified. My name is Kyle and my job is to simplify the web for you
so you can start building your dream project sooner. As you can see, there's a lot of documentation that React has released about what's going to be happening in version 19.
I'm gonna go through in order of importance everything that's changing and the biggest change is going to be that they're actually adding a compiler to react
This is actually a really big deal because for the longest time react only ran in the browser and there's no compile step at all
And now other frameworks have come along such as Astro and Svelte and they added in their own compile step and this compile step
Just takes care of a lot of things for you behind the scenes
So you don't have to write extra code for that
But since react never had that we had different hooks like use memo use callback and the memo function
that allows you to do extra performance things to make sure your code ran
performantly, says there was no compiler to do that for you automatically.
Well, we're React version 19, the big thing that they're pushing is this React
compiler. So that means that automatically React is going to add its own
memoization for things like use memo, use callback, and the memo function, so
you never have to use those hooks or functions ever again. It's just going to be
automatically taken care of for you by the compiler, so anytime you would normally
need to use memo or use callback, you can just completely remove that and the
compiler will take care of it for you.
Now this is a huge win because not only does it make your code simpler and easier to read
and write since you no longer have to think about this, but it also will make your code
faster because it's almost always the case that the actual compiler is going to find more
instances of where you should be doing memoization than where you would normally find it yourself.
So having this extra compile step is going to make your application faster and easier to
write and is honestly the thing I'm most excited about for React version 19 because these
These hooks are the reason that React is so confusing and complicated to write, especially
as you get larger and larger applications where performance is really important.
Now, the next two main features I want to talk about are something that you may be familiar
with if you've already worked inside of NextJS, and that's the idea of actions as well
as the use client and the use server directive.
We'll start by talking about actions since this affects you a little bit more directly,
but if you've ever worked inside of NextJS, you know that you can create a form and instead
of passing an on-sment you pass it in action, and this action will take in all of your
different form data and you can do whatever you want with this action.
And if you're using next chess, this action can even run on the server instead of running
in the client.
Well, the big change with React 19 is first that they're making that this is a stable
feature because right now it's not really a stable feature.
And secondly, they're adding it so it actually works inside of client or server applications.
So this action that I pass in here, which is just a function that takes in my form data,
can either run on the client or it can run on the server.
and it has other hooks built around it that make dealing with state and loading and so on incredibly easy.
As you can see here we have hooks called use form status and use form state.
And if you want to learn more about these new hooks, I actually have an entirely free course on every single react hook you need to know.
And I constantly update this course with ever new hooks are released.
So if that sounds interesting, check out the link down in the description below and sign up for that course.
And again, I'll update it as soon as new hooks are released or changed.
But essentially this new way of using an action instead of an on-submit just gives you a more built-in way in react to actually deal with forms,
form submissions, form error states, form loading, form data, everything that there is to do with forms can be done much easier by using this action instead of using an on-submit handler.
