NEW React 19 Changes Are Amazing!

Summary

In this video, Kyle from Web Simplified breaks down the key updates in React version 19, aiming to simplify the transition for developers. The most significant change is the introduction of a compiler, which will automatically handle memorization, reducing the need for hooks like `useMemo`, `useCallback`, and the `memo` function. This simplifies code and enhances performance. React 19 also stabilizes features like actions and directives for client and server-side rendering, making form handling more intuitive with new hooks like `useFormStatus` and `useFormState`. Additionally, it introduces `useOptimistic` for optimistic UI updates and improves suspense for loading styles and scripts. The update promises better integration with web components and eliminates the need for `forwardRef` and `react.lazy` with the new `use` hook. This comprehensive overview highlights React's commitment to making development more accessible and efficient.

Takeaways

• 🚀 **React Compiler Introduction**: React 19 will include a compiler, which is a significant change as React historically ran in the browser without a compile step. This compiler will automatically handle memorization, reducing the need for manual hooks like `useMemo`, `useCallback`, and `memo`.
• 📝 **Simplified Code and Performance**: The compiler will simplify code by removing the need for specific hooks, making it easier to read and write, and likely improving performance by identifying more opportunities for memoization than developers might find themselves.
• 🔄 **Actions and Directives**: React 19 will stabilize and expand the use of actions and the `use client`/`use server` directives, allowing for server-side execution of functions that were previously limited to client-side, enhancing flexibility and performance.
• ⚙️ **Form Handling Enhancements**: New hooks `useFormStatus` and `useFormState` will streamline form handling, reducing boilerplate code for managing form states, errors, and loading states.
• 🌟 **Optimistic Updates**: The `useOptimistic` hook will facilitate optimistic UI updates, providing a seamless user experience by showing immediate feedback (e.g., a 'like') before server confirmation.
• 📜 **Client and Server Directives**: The `use client` and `use server` directives will become stable features, enabling frameworks other than Next.js to leverage these capabilities for better server-side rendering and client-side execution control.
• 📄 **Document Metadata**: React 19 will improve handling of metadata within components, allowing for tags like `title`, `meta`, and `link` to be placed anywhere in React components and automatically positioned correctly in the document head.
• 🔗 **Suspense for Styles and Scripts**: Suspense, introduced in React 18, will be enhanced to ensure that styles, links, and scripts are loaded and executed before the page content is displayed, improving the consistency of the rendering process.
• 🌐 **Improved Web Components Support**: React 19 will offer better integration with web components, making it easier to use them within React applications without requiring separate React-specific versions.
• 🔄 **No Need for `forwardRef`**: The `forwardRef` function will become obsolete as React 19 will automatically pass the `ref` prop to every component, simplifying the process of handling references.
• 🆕 **New `use` Hook**: The addition of the `use` hook in React 19 will allow for asynchronous loading of JavaScript files, promises, and context, providing a powerful but complex tool for advanced use cases.

Q & A

What is the biggest change coming in React version 19?

The biggest change is the addition of a compiler to React. This is significant because previously React only ran in the browser without a compile step, but with the new compiler, React will automatically handle optimizations such as memorization that were previously manual through hooks like useMemo, useCallback, and the memo function.

Why is the introduction of the React compiler considered a win for developers?

The introduction of the React compiler is a win because it simplifies code by eliminating the need for manual performance optimization hooks, making the code easier to read and write. Additionally, it is expected to make code faster as the compiler is likely to identify more opportunities for memoization than developers would manually.

What are 'actions' in the context of React and Next.js?

Actions in React and Next.js are functions that can handle form submissions. They allow for the processing of form data, and with React 19, these actions will become a stable feature that can run on either the client or the server, providing a more built-in way to deal with forms, including submissions, error states, loading, and data management.

How do the new hooks useFormStatus and useFormState simplify form handling in React?

The useFormStatus and useFormState hooks simplify form handling by automating the management of form state and loading status. This reduces the amount of boilerplate code needed to handle form submissions, errors, and loading messages, making the process more straightforward and easier to implement.

What is the purpose of the useOptimistic hook?

The useOptimistic hook allows for optimistic updates in React applications. This means that it can immediately reflect changes, such as a 'like' action, to the user interface before the server has confirmed the action, providing a smoother and more immediate feedback to user interactions.

What is changing with the use client and use server directives in React 19?

In React 19, the use client and use server directives are becoming a stable feature. This means that they will no longer be experimental and can be used to determine if code runs on the server or the client. This change is expected to enable other frameworks besides Next.js to adopt these directives.

How does the document metadata feature in React 19 help with server-rendering?

The document metadata feature allows developers to place title tags, meta tags, and link tags within React components, which are then automatically moved to the correct location in the HTML head. This ensures that metadata is properly managed, which is particularly beneficial for server-rendered pages and React server components.

What is the role of the Suspense feature in React 18, and how is it being enhanced in React 19?

Suspense is a feature in React 18 that allows for the streaming of data to be rendered. In React 19, it is being enhanced to ensure that it waits for style tags, links, and scripts to load before displaying the page. This helps prevent scenarios where a page renders without the necessary CSS or scripts loaded.

How will React 19 improve the integration of Web Components?

React 19 will improve the integration of Web Components by making them work much better with React. This will simplify the process of implementing Web Components within a React project, addressing past difficulties and eliminating the need for separate Web Component and React-specific versions of libraries.

What is the impact of the change to the ref prop in React 19?

In React 19, the ref prop will be automatically passed to every component, eliminating the need for the forwardRef function. This simplifies the process of using refs within React components.

What is the use hook in React 19, and how does it differ from other hooks?

The use hook in React 19 is a new addition that allows for the asynchronous loading of JavaScript files, running promises, and managing context in a more complex and flexible way than traditional hooks. It breaks the rules of normal hooks by allowing asynchronous operations and is considered one of the most powerful but potentially complex hooks added to React.

Outlines

00:00

🚀 Introduction to React 19's Major Updates

This paragraph introduces the upcoming changes in React 19, emphasizing the addition of a compiler which will automatically handle performance optimizations previously done manually with hooks like `useMemo`, `useCallback`, and the `memo` function. The compiler aims to simplify code and improve performance. Additionally, it covers the incorporation of 'actions' for form handling, similar to Next.js, and the expansion of server and client directives for more than just Next.js. The paragraph also mentions new hooks like `useFormStatus`, `useFormState`, and `useOptimistic` for handling form submissions, state, and optimistic updates, respectively.

05:01

📄 Enhancing React with Metadata, Suspense, and More

The second paragraph discusses additional features in React 19. It covers the ability to place metadata tags like titles, meta, and link directly in React components, which will be correctly positioned in the HTML head. This feature is particularly useful for server-rendered components. The paragraph also explains improvements to the Suspense feature from React 18, ensuring that styles and scripts are loaded before the page content, preventing CSS from being missing during initial render. Furthermore, it touches on better support for web components in React 19, making it easier to integrate them into React projects. Lastly, it mentions the deprecation of `forwardRef` and the introduction of the `use` hook for asynchronous loading and running of JavaScript files, promises, and context.

Keywords

💡React Compiler

The React Compiler is a new feature in React version 19 that automates the optimization of React applications. It is significant because, traditionally, React did not include a compile step and relied on developers to use hooks like `useMemo`, `useCallback`, and the `memo` function for performance optimizations. The compiler will handle these optimizations automatically, reducing the need for manual code and potentially improving performance by identifying more opportunities for optimization. This simplifies the code and makes it more efficient, which is a major focus of the video.

💡Actions

Actions in React 19, which are also a feature in Next.js, allow developers to handle form submissions in a more streamlined way. Instead of using the traditional `onSubmit` handler, an action function can be passed that takes form data and performs operations, which can even be server-side with Next.js. This feature is being stabilized in React 19 and is expected to work within both client and server applications, making form handling more intuitive and reducing boilerplate code for state and loading management.

💡useClient and useServer Directives

The `useClient` and `useServer` directives are used in Next.js to determine where certain code should execute—either on the client or the server. With React 19, these directives are becoming a stable feature, which means they can be used more broadly across frameworks beyond Next.js. This stability allows for better control over code execution context and is a step towards more innovation and interoperability between different frameworks.

💡Document Metadata

Document Metadata in React 19 allows developers to define title, meta, and link tags directly within React components. These tags are then automatically placed in the correct location in the HTML head by React. This feature is particularly useful for server-rendered applications and improves the handling of metadata, which was previously challenging with libraries like React Helmet.

💡Suspense

React Suspense, introduced in React 18, is a feature that enables the deferred loading of components. React 19 enhances Suspense by ensuring that it waits for stylesheets, scripts, and other resources to load before rendering the associated components. This helps to prevent scenarios where a page renders without the necessary CSS or JavaScript, thus improving the user experience and ensuring a more consistent rendering process.

💡Web Components

Web Components are a set of technologies that allow for the creation of custom, reusable, encapsulated HTML tags. In the script, it is mentioned that React 19 will improve support for Web Components, making it easier to integrate them into React applications. Previously, using Web Components with React required workarounds or specific libraries due to compatibility issues, but the improved integration will simplify this process.

💡useMemo and useCallback Hooks

The `useMemo` and `useCallback` hooks in React are used to optimize performance by memoizing values and callbacks, respectively. With React 19's compiler, these hooks will be less necessary as the compiler will automatically handle memorization, reducing the complexity of the code and the cognitive load on developers.

💡Memo Function

The `memo` function in React is a higher-order component used to optimize the rendering of components by memoizing the result and only re-rendering when props change. The introduction of the React Compiler in version 19 will automate this optimization, making the manual use of `memo` less relevant.

💡useFormStatus and useFormState Hooks

These are new hooks in React 19 that aim to simplify form management within React applications. `useFormStatus` and `useFormState` will handle aspects like form data, loading, and error states, reducing the amount of boilerplate code needed and making it easier for developers to work with forms.

💡useOptimistic Hook

The `useOptimistic` hook allows for optimistic UI updates, where the interface immediately reflects a user action, such as 'liking' a post, before the server has confirmed the action. This creates a smoother user experience by showing the expected result instantly and then correcting it if there is an error, which is a powerful concept for applications that require a responsive UI.

💡use Hook

The `use` hook in React 19 is a new addition that enables asynchronous loading of various resources, including JavaScript files, promises, and context. It is a complex hook that deviates from the typical rules of hooks in React, offering a wide range of possibilities for loading and managing asynchronous operations within components.

💡Forward Ref

In React, the `forwardRef` function is used to forward a `ref` attribute to a child component. According to the script, React 19 will handle this automatically, eliminating the need for developers to use `forwardRef`. This change will simplify the process of using refs within React components.

Highlights

React version 19 will include a compiler, which is a major change as React traditionally ran only in the browser without a compile step.

The compiler will automatically handle memorization, reducing the need for manual performance optimizations like `useMemo`, `useCallback`, and the `memo` function.

The introduction of the compiler will simplify code and improve performance by automatically finding instances for memoization more effectively than manual methods.

Actions, a feature from Next.js, will become a stable feature in React 19, allowing form data to be processed either on the client or server.

New hooks `useFormStatus` and `useFormState` will facilitate easier handling of form submissions, error states, and loading data.

The `useOptimistic` hook will enable optimistic updates, showing immediate feedback to user actions before server confirmation.

Client and Server directives (`use client` and `use server`) will become stable, allowing other frameworks to utilize these features beyond Next.js.

Document metadata can now be placed within React components, and React will ensure it is correctly positioned in the HTML.

Suspense, a feature from React 18, will be empowered in React 19 to wait for style tags, links, and scripts to load before rendering.

Web components will work better with React 19, making it easier to implement them in React projects.

The `forwardRef` will no longer be necessary as the `ref` prop will be automatically passed to every component in React.

The `use` hook will be added to React, allowing for asynchronous loading of JavaScript files, promises, and context.

The `use` hook is complex and breaks the rules of normal hooks, offering new possibilities for React development.

React 19 will make applications faster and easier to write by streamlining performance optimizations and form handling.

The new features in React 19 aim to reduce boilerplate code and improve the developer experience with built-in utilities.

Kyle, the presenter, offers a free course to keep developers updated on new React hooks as they are released.

The free course covers all the new hooks in React, including in-depth explanations and practical applications.

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