What's new in React 19 | Lydia Hallie

Summary

In this talk, Lydia introduces React 19's new features, focusing on transitions for responsive UI updates and the useActionState hook for streamlined state management. She also covers React Server Components for efficient server-side rendering and the use API for handling asynchronous data on the client side. Additionally, she discusses improvements like ref props in server components and browser hint APIs for optimized resource loading.

Takeaways

• 🆕 React 19 introduces stable features that were previously in the Canary version, focusing on improving the user experience and reducing boilerplate code.
• 🔄 Transitions, introduced in React 18, are now stable in React 19, allowing for more responsive UI updates by yielding to the main thread every 5 milliseconds to handle user interactions.
• 📈 The useTransition hook in React 19 simplifies handling state updates by automatically setting the pending state and reducing the amount of boilerplate code needed.
• 🎛️ Actions in React 19, marked with 'useActionState', provide a way to handle transitions and state updates with improved status information and less manual intervention.
• 🔗 React 19 allows for server components with 'use client bundle' directive, enabling more direct server-side functionality within components without the need for HTML or JavaScript on the client side.
• 🌐 Server components in React 19 can be used to access server-side resources like databases and file systems, and are sent to the client as JSON, streamlining the rendering process.
• 📚 The 'useFormStatus' hook offers an easy way to get status information from the last form submission, improving form handling and user feedback.
• 😌 The 'useOptimistic' hook allows for updating the UI optimistically before a transition completes, providing a smoother user experience by showing data as if the action has already completed.
• 📈 React 19 supports new APIs for working with browser hints like preload, prefetch, and DNS, which can help speed up resource loading times.
• 📝 React 19 now supports rendering document metadata directly within components, simplifying the management of titles, links, and meta tags.
• 🎨 The support for directly using stylesheets in components ensures that the browser does not render components until the CSS has loaded, preventing FOUC (Flash of Unstyled Content).

Q & A

What is the main focus of the talk by Lydia about React 19?

The talk by Lydia focuses on the new features and improvements in React 19, including transitions, the useActionState hook, server components, and other enhancements that make building with React more efficient and responsive.

How do transitions in React 19 help with UI responsiveness during state updates?

Transitions in React 19 help with UI responsiveness by yielding back to the main thread every 5 milliseconds to check for other tasks, such as user interactions, allowing React to pause the current render, handle the task, and then resume rendering, thus preventing the UI from becoming unresponsive.

What is the purpose of the useActionState hook introduced in React 19?

The useActionState hook simplifies the handling of asynchronous state updates by providing the action's state, the action function itself, and a pending state indicator, reducing the amount of boilerplate code needed to manage data, pending, and error states.

Can you explain the concept of actions in React 19 and how they differ from traditional state updates?

Actions in React 19 are functions that trigger transitions, which are asynchronous state updates. They differ from traditional state updates by allowing React to batch and commit changes more efficiently, ensuring a smoother user experience and reducing visual overwhelm during rapid state changes.

What is the significance of server components in React 19, and how do they differ from traditional client-side rendering?

Server components in React 19 allow React to send serialized componentry to the client in a special JSON-like format, which can be directly reconstructed on the client side without the need for HTML or JavaScript. This approach reduces the reliance on the client-side renderer to rebuild the React tree, streamlining the rendering process and improving performance.

How does the useClientBundling directive in React 19 help with client-side rendering of components?

The useClientBundling directive in React 19 adds the components and their imports to the client-side JavaScript bundle, instructing the bundler to include them in the client-side rendering. This allows components to be rendered on the client side without server-side rendering, providing more flexibility in component rendering strategies.

What is the useOptimistic hook in React 19, and how does it affect the UI updates?

The useOptimistic hook in React 19 allows developers to update the UI optimistically, showing data as if an action has already completed before the actual data is returned. This creates a smoother user experience by immediately reflecting changes in the UI and updating it once the data is confirmed.

How can the useFormStatus hook in React 19 be used to enhance form handling?

The useFormStatus hook in React 19 provides information about the last form submission, including the form data being submitted and the transition's pending state. This makes it easier to create reusable form elements and provide real-time feedback and status updates to users.

What are server actions in React 19, and how do they simplify server-side functionality within client components?

Server actions in React 19 are functions that run server-side but can be called from the client-side. They simplify server-side functionality within client components by offloading computations or data manipulations to the server, reducing the load on the client and eliminating the need for separate API endpoints.

How do the new APIs in React 19 for working with browser hints benefit performance?

The new APIs in React 19 for working with browser hints, such as preload, preconnect, and prefetch, allow developers to fetch or connect to certain resources before they are discovered, which can speed up loading times. React handles the hoisting to the head and automatically reorders the browser hints based on their priority, ensuring that the most critical resources are made available as quickly as possible.

Outlines

00:00

🚀 Introduction to React 19 Features

The speaker, Lydia, introduces the new features in React 19, emphasizing the stability of features previously in the experimental React Canary. Transitions, introduced in React 18, are highlighted as a method to maintain UI responsiveness during state updates. Lydia explains how transitions work by yielding to the main thread every 5 milliseconds, allowing other tasks like user interactions to be handled. This prevents the application from becoming unresponsive. She also discusses the use of the `useTransition` hook for handling state updates and user interactions more efficiently, reducing boilerplate code and improving the user experience.

05:01

🔄 Enhancing User Experience with Transitions and useAction

This paragraph delves deeper into the use of transitions and the `useAction` hook in React 19. Lydia explains how `useAction` simplifies handling transitions by providing the action function and pending state. She refactors a code example to use `useAction`, eliminating the need for manual state management. Lydia also touches on React DOM's ability to work with actions through props, and introduces `useFormStatus` for easier access to form submission status. The paragraph concludes with the introduction of the `useOptimistic` hook, which allows developers to update the UI optimistically before a transition completes, providing a smoother user experience.

10:02

🌐 Embracing Server Components and Asynchronous Data Handling

Lydia discusses the introduction of React Server Components (RSC) in React 19, which enable a new rendering approach where React sends serialized components to the client in a JSON-like format. This allows for server-side functionality to be directly used within components. She explains the use of suspense boundaries to handle data fetching within server components and introduces the `use` API for handling promises and context more flexibly on the client side. The paragraph also covers the `useClientBundle` directive for adding components to the client-side bundle and the benefits of using the `use` API for asynchronous data handling.

15:04

🛠️ Advanced Features and Improvements in React 19

The final paragraph covers additional improvements in React 19, including the ability to pass refs as props to server components, the support for rendering document metadata directly within components, and the introduction of new APIs in `react-dom` for working with browser hints. Lydia also mentions the new support for style sheets in components and the automatic handling of resource loading priorities. The paragraph concludes with an overview of server actions, which are server-side functions callable from the client side, and their potential for offloading computations to the server. Lydia wraps up the talk by highlighting the overall enhancements in React 19 that simplify code and improve performance.

Keywords

💡React 19

React 19 refers to the next major version of the React JavaScript library, which is a popular framework for building user interfaces. In the video, the presenter discusses new features and improvements in React 19, highlighting its impact on the development of responsive and efficient web applications.

💡Transitions

Transitions, introduced in React 18, are a feature that allows for marking certain state updates as non-interruptible, ensuring the UI remains responsive. In the script, transitions are explained as a solution to prevent the UI from becoming unresponsive during complex state updates, which is vital for a smooth user experience.

💡Start Transition

Start Transition is a function in React 19 that enables the passing of asynchronous functions to manage state updates in a way that maintains UI responsiveness. The script mentions that with React 19, developers can now wrap state updates within a 'start transition' to yield control back to the main thread periodically.

💡Action

In the context of React 19, an action is any function that triggers a transition. The script explains that actions can be created using the 'useActionState' hook, which simplifies the process of handling state updates and provides status updates on the transition triggered by the action.

💡Use Action State Hook

The 'useActionState' hook is a new feature in React 19 that facilitates the use of actions and provides status updates on transitions. It returns an array with the action's state, the action function itself, and a pending state indicator, streamlining the process of managing state and transitions.

💡Server Components

React Server Components (RSC) allow React to send serialized componentry to the client in a special JSON-like format, enabling more efficient rendering without the need for HTML or JavaScript on the server side. The script discusses how RSC can access server-side functionality directly within components, revolutionizing the way applications are rendered and interacted with.

💡Suspense Boundary

A Suspense boundary in React is used to wrap components that may have asynchronous data dependencies. In the script, it is mentioned that server components can be wrapped in a suspense boundary, allowing React to stream parts of the application to the client while rendering a fallback UI until the data is fetched and the components are ready to be displayed.

💡Use API

The 'use' API in React 19 is not a hook but a new feature that works with promises or contexts, providing the resolved data or context value. The script explains that this API integrates with Suspense and error boundaries, simplifying the handling of asynchronous data on the client side.

💡Use Optimistic Hook

The 'useOptimistic' hook allows developers to update the UI as if an action has already completed, before the actual data is returned. This can improve perceived performance by showing optimistic data to the user. The script provides an example where a message is shown to the user as if it has been sent, before the server confirms receipt.

💡Use Client Bundle Directive

The 'use client bundle' directive is a feature in React 19 that adds components and their imports to the client-side JavaScript bundle, allowing them to be rendered on the client. The script mentions this directive as a way to explicitly include components in the client bundle for client-side rendering.

💡Server Action

A server action in React 19 is a function that runs server-side but can be called from the client-side. The script describes server actions as a framework feature that simplifies working with server-side functionality within client components, offloading computations or data manipulations to the server.

Highlights

Introduction of React 19 with new stable features including the ability to pass asynchronous functions to start transitions.

Transitions in React 18 are now stable, providing a solution to keep the UI responsive during state updates.

React now yields back to the main thread every 5 milliseconds to handle user interactions during updates.

Use of transitions to batch and commit state updates for a single paint, improving user experience.

Refactor of state management with React 19 using the `useTransition` hook for less boilerplate code.

Introduction of the `useActionState` hook for easy management of action states and transitions.

React DOM now allows working with actions directly through the `action` prop for better form handling.

New `useFormStatus` hook for easier access to form submission status within child components.

Use of `useOptimistic` hook for updating the UI before a transition completes, providing immediate feedback.

Introduction of React Server Components for server-side rendering without needing to rebuild on the client side.

Server Components can access server-side functionality like databases and file systems directly within components.

Suspense boundaries can be used with Server Components to handle data fetching and rendering.

Use of `useClient` directive to add components to the client-side JavaScript bundle for interactive features.

New `use` API for handling promises and context in a more flexible way on the client side.

Server Actions allow server-side functions to be called from client-side components for offloading computations.

Server Components can now accept refs as props without the need for `forwardRef`.

Support for rendering document metadata directly within components in React 19.

Direct use of stylesheets in components with React 19, ensuring styles are loaded before component rendering.

Browser hints APIs in React 19 for preloading and prefetching resources to improve loading times.

Transcripts

[Music]

[Applause]

good morning everyone or good day if

you're watching this online I'm Lydia

hiy and um I don't have time here so

let's just get right into it what is new

in react 19 now I know that many of you

sitting here today have used you know

Frameworks that already had Rea Canary

bundled so not all of these features

will be really new to many of you but

there are many that are now stable in

react 19 so the first one is that in

react 19 we can now pass asynchronous

functions to start transition so

transitions were introduced in react 18

as a way to Mark a certain State update

as non

and we can do this by wrapping this

update in a star transition so by

default react renders all the necessary

components in a single uninterruptable

task but depending on the complexity of

this update it can take quite a while

before reactors actually rendered these

updates and then committed them to the

Dom and since this is all happening on

the main thread our or our application

is unable to handle any other tasks

during this time which leaves the

unresponsive so if a user interacted

with her website while react was

rendering an update they would

experience quite some visual feedback

DeLay So transitions provide a solution

to this because instead of rendering the

update as a single uninterruptible task

uh react will yield back to the main

thread every 5 milliseconds to see if

there are other tasks waiting to be

handled instead for example that user

interaction because if that's the case

react will pause the current render let

the browser handle the task and then

eventually get back to rendering and it

only commits these updates at the most

performing time so transitions ensure

that the UI stays responsive during an

update now it's very common to have a

scenario like the following where a user

can submit some like input based on form

data So within the submit Handler we

first manually set it bending to true

that causes react to rerender showing

the pending States we then initiate the

acing task eventually once that

completes we set p into false and then

handle the data or error that gets

returned and this works but a few things

could be better let's say that we first

update the data with the name Lydia now

if we rendered this to the UI saying

like you successfully updated to the

name Lydia or something um it could

happen or the following like scenario

could happen which looks a bit visually

overwhelming but first we update the

name to Lydia and while this submission

is ongoing we change the name to Evan

now finally some data gets returned

because our Network request finishes so

now we set the data in the UI so the

state is now Lydia but the user might

have expected Evan because that was the

latest submission and that only happens

after the second request return so this

could lead to some like unpredictable

suboptimal user experience and also

there's just quite a lot of boilerplate

to handle data pending and error States

so in react 19 we can now refactor this

to be a transition instead so the used

transition hook provides both the is

pending States and the start transition

function so we no longer have to deal or

manually set that pending state so now

when the user submits some input the

transition starts and it's pending is

automatically set to true the data is

fetched after which the transition then

starts to update the state based on that

returned data now a limitation at the

moment is that by default State updates

after and a weight keyword within start

transitions are not marked as

transitions by default so to make this a

transition we do have to wrap it in yet

another star transition uh this is just

a limitation until Asing context is

available so just something to keep in

mind until then so now again if we have

a similar situation as we had before so

we first submit Lydia and then while

that submission is ongoing we change it

to Evan we only see one value render to

the UI and this happens because if there

are multiple ongoing transitions react

will actually batch them and only commit

the changes once all the transitions are

done and in this case that only results

in a single paint namely Evan so in R 19

functions that trigger transitions are

now called action so an action is just

any function that triggers a transition

which we can do in multiple ways the

first one that we're now familiar with

with star transition but we can also

create an action using the new use

action State hook and this is a new hook

in R9 that makes it really easy to use

actions and also get these status

updates on that transition that this

action triggered and also then set the

state based on this return data so this

hook returns an array with three values

so first we have the action states which

is either the data that we pass for the

initial state so null in this case or

it's the data that gets returned by the

action once the action completed then we

have the actual action um which returns

that action function that we pass as the

first argument and we can also or we can

use this value to actually trigger that

action to or invoke the action to

trigger the transition

and lastly we have the pending State

indicator which is true as soon as the

transition starts and then automatically

set to false once the transition has

been committed to the Dom so looking

back at the code we had before even

though this was already refactored with

the asynchronous transition we still had

to manually set that data so instead we

can refactor this to use the use action

State hook instead so we no longer have

to have a separate data State because

that is now just returned from the use

action State Hook and the initial State

value is now passed as the second

argument which is null in this case the

submit action is the first argument that

we pass to the use action State hook

which by default also receives the

current state and the form data

arguments and because we get access to

this form data we also no longer have to

manually set the state of the user's

input instead we can just directly get

this from form data and we can get the

is pending state from the use action

State hook as well

so the behavior we see is the same just

with a lot less boiler plates so

invoking this action triggers a

transition automatically sets a spending

to true and then set a false once it's

been

committed now react Dom allows you to

work with actions directly through the

action prop or the form action prop for

buttons and inputs so the values that we

pass to action or the form action prop

can be any function whether synchronous

or asynchronous but they're all

considered actions meaning they all

trigger transitions

so this action can either be from the

use action State uh hook or just a

standalone function and an action

automatically receives the form data as

a prop which makes it really easy to

work with these form values and Rec 19

also introduces a new use form status

hook which makes it even easier to get

the status information from the last

form submission so this returns an

object which includes the form data

that's currently being submitted and

also the transitions pending state

so the use form status hook uses the

action data from the parent form similar

to how context work so we can use this

hook within components that are rendered

within forms and it will just directly

access the values of the action so when

the transition is pending pending is

true by the or return True by the use

form status hook and once the transition

has been committed this is automatically

set to false so creating reusable form

elements is super easy this way and it's

very easy to also provide that real time

feedback and status updates to users and

again it works pretty similar to context

so just make sure that you don't use

this hook directly with then the

component that actually renders the form

it has to be a child

component now an asynchronous task

within an action can take a while to

actually return some data or maybe users

are on slower internet connections

Anything could happen and instead of

showing a pending State we might want to

show the data as if the action has

already completed which we can do if we

already know what the return data is

going to be and for this we can use the

new use act or use optimistic hook so

the function returned from the use

optimistic hook can be used within an

action to update the UI before a

transition completes and it receives a

state which uh gets returned initially

whenever no action is pending and also a

function that we can then use to

actually add that new optimistic state

so the first element of the return array

is the current state which is either the

initial State when no action is pending

or it's the returned value from the

update function if an action is

pending and the second value is the

actual update function which we can use

to actually you know invoke this

function and set a new optimistic value

so for example let's say that we have

some messages that we receed from the

server through the messages from server

prop oh sorry no I have to go

back so in the use optimistic hook we

set the initial state to be the value of

the messages from server prop so this is

the initial value of the first returned

element which in this case is called all

messages so then we map over all

messages and then render this which is

just the initial messages from server

now when a user submits a message the

add message action is triggered and

inside the add message action we first

invoke the add optimistic message

function of with the value of the

message that we just typed and this

triggers the update function of the use

optimistic hook which then returns an

array containing the current messages

from the server along with this new

optimistic

message so this now updates the value of

all messages because the pending

transition is ongoing and because

there's now changed value react will

rerender and show the list of messages

including that optimistic message and

maybe to indicate to users that this is

still like being sent we can display

some sending or pending text stuff like

that now we actually send the request

and after some time the request succeeds

and this updates the messages from

server prop now since we use this value

as the initial State all messages now

gets this updated value which again

causes a rerender so now we actually

have all the messages but in the

meantime the user saw the optimistic

message so actions trigger transitions

which are asynchronous by default but

use optimistic essentially opts out of

that asynchronous behavior so it's

immediately reflected in the

UI now moving on to some uh features Rec

19 now also introduces Rec server

components so traditionally we

essentially had two ways to render our

application so we could either use

client side rendering in which case the

server side react tree got rendered to a

JavaScript bundle and then we had some

minimal HTML that both got shipped to

the clients where then the client site

renderer uses this bundle to rebuild

that react tree or we could use server

side rendering in which case the react

tree got the render to both HTML and a

JavaScript bundle still sent to the

clients and then this static HTML was

made interactive through that bundle now

both approaches rely on the fact that

the react renderer needed to rebuild

that reactory client side even though it

already had it on the

server so the introduction of the

concurrent renderer in RCT 18 allowed

for a different approach namely server

or react server components so react

server components allow react to send

the actual serialized componentry to the

client by using a special Json like

format and the client that rer

understands this format and can just

rebuild that tree client site without

the need for HTML or

JavaScript so Rec server components are

never sent to the client only their

return value is in this Json like format

so this means that we get to use server

side functionality directly within our

components like accessing databases the

file system and so on and this is

especially easy because in react 19 we

can now use async a weight to render

server components and the RSC payload

Remains the Same because that's just a

representation of what is actually

returned now it can happen that this

data lookup takes a while to complete

and in that case the entire react tree

needs to wait before it's sent to the

client or before that data is completely

fetched before it's sent to the client

so to fix this we can wrap the server

components in a suspense boundary and

this allows re to already stream the

parts that were faster to the clients

and in the meantime render that suspense

fall back only once the data has been

fetched and the RC payload has been

generated will this component actually

be sent to the

client now since re server components

are are only rendered on the server and

then rendered to Json without needing

any javascripts we cannot use client

side functionality by default and this

includes things like hooks event

handlers windows and so on so to render

components client side we need to

explicitly add them to the JavaScript

bundle and to tell bundlers that we want

to add them to the bundle including

their Imports we can use the now stable

use client bundler directive and adding

this directive um adds the components

and its Imports to the bundle that get

chipped clients side so and react won't

render this component on the server

instead it takes the CSR the client site

rendering approach

here so now because we're actually

shipping the component to the client and

not just the return value we cannot

fetch data the same way that we could

with a server components but there are a

couple things we can do here first we

can just fetch the data within a server

component and then pass this data as

props to the client components or we can

use the new use API within a client

components and pass the promise as a

prop instead of the actual data so use

is a new API not a hook that accepts

either a promise or a context and it

Returns the data of the resolved promise

in case we pass a promise or the value

of the context in case we passed a

context so in this case we're creating

the uh reactions promise within the Sero

components and instead of awaiting this

value we're just passing the actual

promise down to the client and on the

client we then pass this promise to the

use API so this API automatically

integrates with suspense and error

boundary so while we're waiting for that

promise to resolve on the clients we can

show these suspens is fall back and then

once the promise resolves the fallback

is switched to the actual components or

in the case the prom is rejected the

error boundary gets shown now the

benefit of using the use API directly on

the client is that the rest of the

server components can already be

streamed to the clients with without

having to await that

data so the use API makes it incredibly

easy to work with asynchronous data

client side whereas previously we had to

deal with API endpoints and setting

loading and error States react can now

handle all of this for us which really

simplifies our code now we can also use

the use API with context which

essentially replaces the use context

hook so one big difference here though

is that we can conditionally call it

because it's a hook or it's an API it's

not a hook so this means that we can

call it after early returns within

conditions and so on so the use API

gives us a lot more flexibility to use

context based on any runtime

condition now in our server environment

we can also create a server action and a

server action is a function that runs

server side but can be called client

side and really this is more of a

framework feature because it requires a

framework to actually use it but we can

create a server component uh within a

component by using the use server

directive so this can either be on top

of a functions body that we then pass as

a prop to the client components or we

can create an entire file dedicated to

just server actions by adding the use

server directive on top of that file and

then import the server action within the

client

component now it's up to the framework

to actually implement this endpoint but

whenever a server action is traed react

will send the request to the server to

execute this

function and we can track the state of

this request by getting more information

about the action status for which we can

use the use action State hook uh use

start transition derive it from the use

form status hook and so on so server

actions make it incredibly easy to work

with any server site functionality

within client components because we no

longer have to create those separate API

endpoints and they're especially useful

in scenarios whenever we want to offload

certain computations or any data

manipulations to the server which really

reduces that load on the client

now moving on from the server and client

features some other improvements in

react 19 so in react 19 we can now

access ref as a prop for Server

components so previously to pass a ref

to a server component directly we had to

use forward ref but starting with react

19 function components now accept ref as

a regular prop without the need for

forward ref so just this change makes

react feel a lot like closer to the

platform because we no longer have to

import anything from react actually M's

work and also ref callbacks now allow a

cleanup function for example to uh

remove any event listeners which is

really great to prevent any memory

leaks re 19 add support for rendering

document metadata text directly within

components so whenever react renders

this component it'll see the title link

and meta tags and automatically hoist

them to the head of the document so as

previously we had to use tools like

react helmet to handle this directly

within components we can now just use it

natively in react but for more more like

custom metatags you might still want to

use react

helmet now react 19 also adds support

for directly using style sheets in the

component that actually uses these

Styles so we can just directly add them

to our components and react will again

hoist these to the head which ensures

that the browser will not render the

components until the CSS has loaded and

we can also load a stylesheet within a

suspense boundary so in this case we're

loading the uh button and the common CSS

within the suspense boundary and since

the CSS has a higher precedence because

that's high react ensures that this

Styles sheet will be loaded first and

when loading CSS Styles in a suspense

boundary react will keep rendering the

suspense fallback until the sty sheet is

inserted into the head and fully loaded

it will only reveal the content once the

CSS is completely loaded so this

prevents that style of or that flash of

unstyled

content now lastly staying in the head

components uh react 19 also includes new

a apis within react Dom for working with

browser hints So within our components

we can use apis like preload preit

prefetch DNS and many more to use these

browser hints and browser hits can be

really useful to fetch or connect to

certain resources before they are

discovered which can really help to

speed up certain loading times and react

handles the hoisting to the head but

also automatically reorders the browser

hints based on their priority to early

loading so as developers we don't have

to worry about the orders like uh

performance implications so this ensures

that the most critical resources are

made available as quickly as

possible now in the next talk Sam sakov

will show you how to use these new

features by refactoring some existing

react code with these new apis thank you

so much for coming to my talk and have

fun building with react 19

[Music]

[Applause]