fbpx
  1. Tubelator AI
  2. >
  3. Videos
  4. >
  5. Education
  6. >
  7. Top 7 Exciting Changes in React 19 Explained Simply

Top 7 Exciting Changes in React 19 Explained Simply

Available In Following Subtitles
English
Variant 1
Posted on:
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!
tubelator logo

Instantly generate YouTube summary, transcript and subtitles!

chrome-icon Install Tubelator On Chrome

Video Summary & Chapters

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.

Video Transcript

0:00
Staying up to date with everything that's changing or react is incredibly difficult.
0:04
So in this video, I'm going to go through the seven main things that you need to understand about React version 19.
0:09
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.
0:18
Welcome back to WebDevSimplified. My name is Kyle and my job is to simplify the web for you
0:22
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.
0:29
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
0:36
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
0:42
And now other frameworks have come along such as Astro and Svelte and they added in their own compile step and this compile step
0:49
Just takes care of a lot of things for you behind the scenes
0:51
So you don't have to write extra code for that
0:53
But since react never had that we had different hooks like use memo use callback and the memo function
0:58
that allows you to do extra performance things to make sure your code ran
1:01
performantly, says there was no compiler to do that for you automatically.
1:05
Well, we're React version 19, the big thing that they're pushing is this React
1:08
compiler. So that means that automatically React is going to add its own
1:12
memoization for things like use memo, use callback, and the memo function, so
1:16
you never have to use those hooks or functions ever again. It's just going to be
1:20
automatically taken care of for you by the compiler, so anytime you would normally
1:23
need to use memo or use callback, you can just completely remove that and the
1:27
compiler will take care of it for you.
1:29
Now this is a huge win because not only does it make your code simpler and easier to read
1:32
and write since you no longer have to think about this, but it also will make your code
1:36
faster because it's almost always the case that the actual compiler is going to find more
1:41
instances of where you should be doing memoization than where you would normally find it yourself.
1:45
So having this extra compile step is going to make your application faster and easier to
1:49
write and is honestly the thing I'm most excited about for React version 19 because these
1:53
These hooks are the reason that React is so confusing and complicated to write, especially
1:58
as you get larger and larger applications where performance is really important.
2:02
Now, the next two main features I want to talk about are something that you may be familiar
2:05
with if you've already worked inside of NextJS, and that's the idea of actions as well
2:09
as the use client and the use server directive.
2:12
We'll start by talking about actions since this affects you a little bit more directly,
2:16
but if you've ever worked inside of NextJS, you know that you can create a form and instead
2:20
of passing an on-sment you pass it in action, and this action will take in all of your
2:23
different form data and you can do whatever you want with this action.
2:27
And if you're using next chess, this action can even run on the server instead of running
2:30
in the client.
2:31
Well, the big change with React 19 is first that they're making that this is a stable
2:35
feature because right now it's not really a stable feature.
2:38
And secondly, they're adding it so it actually works inside of client or server applications.
2:42
So this action that I pass in here, which is just a function that takes in my form data,
2:46
can either run on the client or it can run on the server.
2:49
and it has other hooks built around it that make dealing with state and loading and so on incredibly easy.
2:55
As you can see here we have hooks called use form status and use form state.
2:59
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.
3:05
And I constantly update this course with ever new hooks are released.
3:08
So if that sounds interesting, check out the link down in the description below and sign up for that course.
3:12
And again, I'll update it as soon as new hooks are released or changed.
3:15
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,
3:22
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.
shape-icon

Download extension to view full transcript.

chrome-icon Install Tubelator On Chrome