NEW React 19 Changes Are Amazing!

Summary

このビデオでは、Reactのバージョン19で追加される主な7つの機能について説明しています。コンパイラの追加、アクションとフックの利用、クライアントとサーバーの区別、ドキュメントメタデータ、サスペンスの改善、ウェブコンポーネントのサポート改善、useフックの追加などが含まれます。ビデオの内容を正確に要約することで、視聴者の関心を引きつけています。

Takeaways

• 😀 React 19 adds a compiler for improved performance and simpler code
• 👍 Actions provide an easier way to handle forms and submissions
• 🔥 useServer and useClient directives enable distinguishing between client/server code
• 📑 Document metadata can be added directly in components
• ⚙️ Suspense waits for styles, scripts etc to load before rendering page
• 🔌 Web components will work much better in React 19
• 😎 Forward refs are no longer needed thanks to automatic ref passing
• 🎣 The new use hook replaces react.lazy for code splitting
• 📚 A free course covers all the new React hooks
• 🙌 Fewer hooks needed thanks to the new compiler

Q & A

What is the biggest change coming in React 19?

The biggest change is that React is adding a compiler, which will automatically take care of memorization that previously required hooks like useMemo and useCallback.

How will the new React compiler make applications faster?

The compiler will automatically find more instances where memorization should be used compared to what developers would manually add, resulting in faster applications.

What is the benefit of using actions instead of onSubmit in forms?

Actions provide built-in ways to handle form submission, error states, loading, and data that previously required custom code in onSubmit handlers.

How can the useOptimistic hook improve UX when submitting data?

useOptimistic allows showing optimistic updates to the UI, like liking a post, before getting a response from the server to improve perceived performance.

How does the new document metadata feature work?

You can put title, meta, and link tags anywhere in a component and React will automatically move them to the correct head location.

What Suspense improvements are coming in React 19?

Suspense will now wait for styles, scripts, and links to finish loading before rendering a page to prevent layout shifting.

Will web components work better in React 19?

Yes, React 19 will have improved web component capabilities and make them easier to implement.

Will Forward Ref still be required in React 19?

No, the ref prop will automatically be passed to all components, eliminating the need for Forward Ref.

What does the new use hook allow?

The use hook enables asynchronous loading of code and data along with running logic like context providers.

Where can I learn more about the new React hooks?

The author offers a free course that covers all React hooks, including the newest ones in React 19.

Outlines

00:00

🤓 React Compiler and Performance Improvements

React 19 will introduce a built-in compiler which will automatically memoize components like useMemo and useCallback did previously. This eliminates the need to manually add memoization, makes code simpler, faster, and easier to read and write.

05:01

🌟 Actions for Forms, Optimistic Updates

React 19 will have first-class support for form submissions via "actions" instead of onSubmit. This is integrated with new hooks like useFormStatus and useFormState to handle forms and submissions. There is also a new useOptimistic hook for optimistic UI updates.

Keywords

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.

Highlights

React is adding a compiler in version 19 for the first time, which will automatically memoize code to improve performance.

The React compiler means you won't need hooks like useMemo or useCallback anymore since memorization will be handled automatically.

"Actions" are becoming a stable API in React for handling forms and submissions with built-in features like error handling.

React hooks like useFormStatus and useFormState make it easy to manage form state with the new Actions API.

The useOptimistic hook allows components to optimistically update with temporary data while waiting for a response from the server.

The useClient and useServer directives for distinguishing client vs. server code are becoming stable APIs available outside of Next.js.

A new <Title> component and other metadata tags will automatically be placed correctly when server rendering components.

Suspense will now wait for styles, scripts, and links to finish loading before rendering a page.

Web components will work much better in React 19 with improved integration.

The forwardRef wrapper will no longer be needed - refs can be passed directly as props.

The new use hook allows asynchronous loading of code and data.

useMemo, useCallback - no longer needed, compiler handles it.

useFormStatus, useFormState - easy form management.

useOptimistic - temporary optimistic UI updates.

use hook - async loading code/data.

Transcripts

staying up to dat with everything that's

changing in 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 webd simplified

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 going to 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 spelt 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 allowed you to do

extra performance things to make sure

your code ran performant since there was

no compiler to do that for you

automatically well with 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 memorization 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 call

back you can just completely remove that

and the compiler will take care of it

for you now this is a huge win because

not 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 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 used client and

the used 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 a nextjs you

know that you can create a form and

instead of passing an on submit you pass

it an 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 nextjs this

action can even run on the server in

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 whatever

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 onsubmit

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 onsubmit Handler cuz a lot of

that boiler plate like loading error

messages and so on is automatically

taken care of for you by these two hooks

of use form status and use form State

and now another additional hook that's

being added is use optimistic again I

entirely cover that hook inside of this

course and this hook just allows you to

do optimistic updates so for example if

you click on the like button on like a

tweet or a post what will happen is

it'll automatically show you that that

has been liked while the server is

processing and then once the actual

result comes back it'll either change it

to liked or unliked based on if there's

an error or not so an optimistic update

just shows you the most optimistic thing

like saying okay if you click on this

like button you want to like it so it'll

show is liked immediately even if it

hasn't been submitted to the server yet

so this is just a really simple hook

that makes doing that much easier and

it's honestly really cool and magical

how this actually works and again I have

a full video on that in the course and

this hooks course that I have is also

completely free by the way I'm not sure

if I mentioned that so if you are

interested in it's completely free all

you have to do is sign up for the course

nothing else now the next thing is

talking about the actual client versus

server directives so you know that you

can put use client or use server at the

top of a file inside of nextjs to

determine if that code is running on the

server or if that code is being pushed

down and ran on the client so this is

just a really easy way for you to

distinguish between these two things and

right now it's really only usable inside

of nextjs but with this newest version

of react 19 that's coming out this is

going to be a stable release instead of

something that is more of an

experimental status which means other

Frameworks can be built around these

used client and used server features and

we will hopefully see more Frameworks

than just nextjs or remix actually have

these used client and used server

features and we can really start to play

around with the power of this in more

than just nextjs which I think is really

cool and important because more and more

Frameworks add to more Innovation which

pushes all the Frameworks further now

the next thing I want to talk about is

this document metadata section and

essentially what this allows you to do

is to put a title tag a meta tag or a

link tag that deals with metadata

anywhere inside of your react component

and it's automatically going to make

sure it moves it to the right location

inside of like the or wherever else it

needs to go so if you want to have like

a different title on multiple different

pages you can just drop this title

component anywhere in your component and

it's just going to work out of the box

which is really nice and they mostly did

this so that you can have certain things

work fine when you're doing server

rendering and react server components

they did this because certain things

like react helmet and other libraries

like that won't work super well with

this new way of doing things in react so

they just built in their own way of

doing that which is just a nice quality

of life feature the next thing I want to

talk about has to do with suspense so

you may not be familiar with suspense

it's a new react 18 feature that allows

you to essentially stream in things so

you can stream your data in to be

rendered it's really popular in

something like nextjs and essentially

what they're doing here is empowering

suspense by making sure that it waits

for certain things like your style tags

links and scripts to load so if you have

certain style tags that are only loaded

on certain pages or certain components

or you have script tags that are running

on only certain pages this is going to

make sure that all your Styles and all

your script tags are actually downloaded

and ran before the page actually shows

that way you don't have an instance

where your page renders but none of your

CSS has been downloaded yet this is just

essentially making sure all of that will

work well together and it even gives you

a simple API that you can use to do this

with more than just style link and

script tags if you really want to but

that's a rather Advanced feature now

those are the main features mentioned in

this article but there's actually quite

a few additional things that are coming

along one thing is that web components

are going to work much better in react

19 they mention it very briefly inside

this article it's like one sentence that

they mention it but they do mention that

web components are now going to be

working much better with react 19 so if

you want to use web components in react

it should be much easier to implement

them inside of a react project because

in the past that was something that was

really difficult which is why you would

almost always see when you're working at

libraries there would be a web component

library and then like a react specific

version because it was so hard to make

web components work in react but now it

should be much easier to get them to

play well together now these last couple

features are really small so I'll go

through them quite quickly the first is

that forward ref is something you are

never going to need to use ever again

and that's because the ref prop that you

normally get by using forward ref is

automatically going to be passed to

every component inside of react so you

can just use refs by just passing it

along as a second prop and you don't

need this crappy forward ref function

wrapping stuff anymore after this next

is that you actually won't really need

to use react. La anymore and that's

because a brand new hook called use just

simply use is being added to react and

this use hook allows you to do a lot of

really cool stuff it allows you to

essentially asynchronously load things

whether that's going to be

asynchronously loading JavaScript files

whether it's going to be asynchronously

running different proc promises or maybe

you even want to run your context

through here all of those things are

possible with the use hook it's honestly

a rather complex hook that breaks all of

the rules of normal hooks so if you want

to learn more about that hook I highly

recommend checking out that free course

I go in- depth into everything you can

do with this hook because honestly it's

one of the coolest hooks that was added

to react but it can be incredibly

complicated because like I said it

breaks all of the rules of every other

hook out there so if you're interested

in checking out this use hook I highly

recommend checking out that free course

and that's all the big new changes

coming to react 19 if you want to make

sure you stay up to date with all the

new hooks that are coming out in react

again I highly recommend you check out

that free course because as soon as new

hooks are added or changed I constantly

update that course with that said thank

you very much for watching and have a

good day