React 19 Is Here - Are You Ready?

Summary

The video script provides an insightful analysis of the latest updates from the React core team regarding React 19 and the React compiler. It delves into the exciting new features like the React compiler, actions, use optimistic, server actions, and more. The script highlights the team's efforts to optimize React's performance, streamline developer experience, and foster community involvement through React Canaries. With a blend of technical insights and enthusiasm, the script builds anticipation for the upcoming release of React 19 and the open-sourcing of the React compiler, promising a future filled with groundbreaking advancements in the world of React.

Takeaways

• 😮 React is introducing a new compiler that will automatically optimize rendering without the need for manual memoization techniques like useMemo and useCallback.
• 🔭 The React compiler aims to optimize code while respecting the rules of React and JavaScript, attempting to compile as much code as possible safely.
• 🚦 React is promoting the use of strict mode, ESLint, and consolidated documentation to help developers write code that adheres to React's rules for better optimization.
• 🌐 React is working on making their APIs consistent across client and server environments, with features like Actions that can handle data transfer in both contexts.
• 🎉 React Canaries allow developers to adopt new stable features earlier and provide feedback before final release, fostering community collaboration.
• 🔀 Server Actions, a new feature in the React Canary, provide a built-in way to manage data submission between the client and server.
• 🧠 React is introducing new hooks like useFormStatus, useFormState, and useOptimistic to work with Actions and manage form state and optimistic updates.
• 📄 React 19 will include support for rendering document metadata (title, meta, link tags) directly in components, simplifying the process.
• ⏳ React is integrating Suspense with resource loading (stylesheets, fonts, scripts) to prevent flashes of unstyled content during transitions.
• 🌐 React 19 will also include long-awaited support for Web Components, allowing better integration with third-party components.

Q & A

What is the main topic of the video script?

The video script discusses upcoming changes and new features in React, such as the React compiler, actions, use of canaries for early feature adoption, and improvements planned for React 19.

What is the purpose of the React compiler?

The React compiler is a new feature that aims to automatically render just the right parts of the UI when state changes, without requiring manual memoization techniques like useMemo and useCallback. It models the rules of JavaScript and React to optimize rendering.

What are actions in React, and how do they work?

Actions allow you to pass functions to DOM elements like forms, managing the lifecycle of data submission. React provides hooks like useFormStatus and useFormState to access the state and response of form actions. Actions can be defined on the client or server side.

What are React canaries, and why are they being introduced?

React canaries allow developers to adopt individual new stable features as soon as their design is close to final, before they are released in a stable version. This enables public development and community feedback on features before they are complete.

What are some of the new features introduced in the React canary?

New features in the React canary include server components, asset loading, document metadata, actions for managing client-to-server data, and related hooks like useFormStatus and useFormState.

What is the difference between 'use server' and 'use client' directives?

'use server' instructs the bundler to generate a post environment for server-side functions, while 'use client' instructs the bundler to generate a script tag for client-side code, similar to Astro's islands.

What is the purpose of the 'document metadata' feature?

The document metadata feature provides built-in support for rendering title, meta, and link tags anywhere in the component tree, working across all environments, including client-side, SSR, and RSC.

What is the 'activity' feature (formerly called 'offscreen'), and what is its purpose?

The 'activity' feature, formerly called 'offscreen,' aims to make certain parts of the app active or inactive, allowing them to run in the background without blocking the main React thread. It's still under research.

What major changes are expected in React 19?

React 19 will be a major version release, including support for web components and other long-requested improvements that may introduce breaking changes.

What is the overall approach of the React team regarding new features and releases?

The React team aims to provide a consistent programming model across all platforms and environments. They are also emphasizing public development and community feedback through canaries before finalizing and releasing new features.

Outlines

00:00

🔥 React's Big Changes: Goodbye to useMemo, useCallback, and More

The paragraph discusses major upcoming changes in React, where certain hooks and APIs like useMemo, useCallback, memo, forwardRef, react.lazy, useContext, and context providers will be replaced or made obsolete. The post from the React core team explains that manual memoization will no longer be necessary as the React compiler will automatically optimize rendering. The changes aim to simplify the React development experience without compromising its core mental model or JavaScript idioms.

05:01

🧪 React Compiler: Optimizing Rendering Without Manual Memoization

This paragraph delves into the React compiler, which is no longer a research project. The compiler aims to automatically optimize rendering without requiring manual memoization techniques like useMemo and useCallback. It models both JavaScript and React rules to safely compile and optimize code. The compiler will attempt to work with existing code, even if it doesn't strictly follow React's rules. The React team is testing the compiler against Meta's large codebase to validate this approach and plans to provide documentation and ESLint rules to help developers write optimizable code.

10:02

🚀 Actions: A New Way to Handle Client-Server Data Transfer

The paragraph introduces Actions, a new feature that provides a consistent way to send data from the client to the server. Actions can be used for both client-side and server-side operations, and React will manage the lifecycle of data submissions. The post discusses hooks like useFormStatus, useFormState, and useOptimistic, which allow developers to access the current state and response of form actions. The team aims for libraries to adopt the Actions pattern to provide a consistent experience for React developers.

15:04

🌐 React Canary: Early Access to New Stable Features

This paragraph discusses React Canaries, a new way for developers to adopt individual new stable features before their official release. Canaries allow the React team to build features in public with community feedback, leading to improvements like the async/await support in Server Components. The current set of features in React Canary, including Actions, document metadata, and asset loading, are ready for the next major version, React 19. The team is also preparing for breaking changes like web component support.

20:04

🔍 Activity (Formerly Offscreen): Prioritizing App Parts

The paragraph mentions the renaming of the 'offscreen' capability to 'activity,' reflecting its broader applicability beyond just offscreen elements. Activity aims to allow developers to make certain parts of the app active or inactive, potentially running in the background without blocking the main React thread. The team has de-prioritized finalizing this feature while focusing on shipping more complete features.

Keywords

💡React Compiler

The React Compiler is a new feature that aims to automatically optimize how React renders components based on state changes, reducing unnecessary re-renders and improving performance. It analyzes the structure and rules of React components to safely optimize the rendering process. The compiler attempts to handle code that doesn't strictly follow React's rules, making it compatible with existing codebases. This feature is intended to eliminate the need for manual memoization techniques like `React.memo` or `useMemo`.

💡Actions

Actions are a new set of features in React that provide a unified way to handle data transfer between the client and server. They allow developers to pass functions to DOM elements like forms, which can operate synchronously or asynchronously. Actions can be defined on the client-side using JavaScript or on the server-side with server directives. React manages the lifecycle of data submission for actions, providing hooks like `useFormStatus` and `useFormState` to access the current state and response. Actions support async/await and can be used with transitions to show pending UI during asynchronous requests.

💡React Canary

React Canary is a new way for React to introduce and develop new features in public, with the help of the community. Instead of building features privately and releasing them only when complete, React Canary allows developers to adopt individual new stable features as soon as their design is close to final. This approach encourages community feedback and input during the development process, helping to refine and improve new features before their stable release. Examples of features available in the React Canary include server components, asset loading, document metadata, and actions.

💡Server Components

Server Components is a new feature in React that allows developers to render components on the server instead of the client. This can improve performance by reducing the amount of JavaScript that needs to be sent to the client, and can also enable new use cases such as rendering content that requires server-side data or logic. Server Components can be used in combination with Client Components, allowing developers to selectively render parts of their application on the server or client as needed.

💡ESLint Plugin

The React team is working on updating their ESLint plugin to help developers understand and apply the rules of React. This plugin will include lint rules that ensure code follows the constraints and guidelines required for optimal performance with the React Compiler. By configuring this plugin, developers can catch subtle bugs and improve the quality of their React applications, while also future-proofing their code for upcoming features like the React Compiler.

💡Activity (formerly Offscreen)

Activity, formerly known as Offscreen, is a feature under research by the React team. It aims to provide a way to make certain parts of the application active or inactive, allowing React to continue running and updating the virtual DOM for inactive components without affecting the main thread or rendering to the real DOM. This feature could enable scenarios like updating content behind a modal or keeping a hidden canvas synchronized without blocking the main UI thread.

💡Web Components

React 19 will include support for Web Components, which are reusable custom elements that can be used across different frameworks and libraries. This change addresses a long-standing request from developers who need to integrate third-party Web Components into their React applications. By adding Web Component support, React will be able to render and interact with these custom elements more seamlessly.

💡Asset Loading

React now integrates with the loading lifecycle of resources like stylesheets, fonts, and scripts, allowing Suspense to wait for these assets to load before rendering content. This feature aims to prevent the 'flash of unstyled content' problem that can occur when styles are loaded after the initial render. React also provides new APIs like `preload` and `preinit` to control when resources should load and initialize, enabling more efficient asset management.

💡Document Metadata

React now includes built-in support for rendering `<title>`, `<meta>`, and `<link>` tags anywhere in the component tree. This functionality, previously provided by libraries like React Helmet, allows developers to manage document metadata directly within their React components, regardless of the rendering environment (client-side, server-side rendering, or React Server Components).

💡Transitions

Transitions are a feature in React that allows developers to manage the state of asynchronous operations, such as fetching data or submitting forms. By default, actions (another new feature) are submitted within a transition, keeping the current page interactive while the action is processing. Transitions also support async/await, enabling developers to show pending UI while an async request is in progress and update the UI once the request completes.

Highlights

Andrew Clark from the React core team suggests significant updates for React, including changes to useMemo, useCallback, memo, forwardRef, React.lazy, useContext, throw promise, and context providers.

Existing React functionalities won't be deprecated, but future versions may not require current practices, hinting at a shift in React's development approach.

The introduction of React Compiler, transitioning from a research project, aims to reduce unnecessary re-renders by optimizing memoization and component updates.

React's core team emphasizes the importance of React being approachable and maintaining its core mental model amidst these updates.

The React Compiler is designed to safely compile code by understanding both JavaScript and React's rules, enhancing performance.

Lint rules will play a significant role in making code more optimizable for the React Compiler, signaling a shift towards more constrained coding practices for optimization.

React's approach to backward compatibility remains a priority, ensuring older code works seamlessly with new versions.

New updates like actions and useOptimistic are being explored to improve client-server interactions and state management.

React Canaries offer a new way for the community to test and give feedback on upcoming features before they're released in stable versions.

React's investment in a compiler and new features like actions shows a commitment to evolving the framework while keeping developer experience in focus.

Server actions are being developed to facilitate easier data transfer between client and server, potentially revolutionizing how forms and mutations are handled.

The React team is focusing on creating a cohesive set of features that work together seamlessly across client and server environments.

React 19 is announced as the next major version, promising compatibility across different environments and including long-requested improvements like web component support.

The shift towards open development with React Canaries allows the community to actively participate in shaping the future of React.

The introduction of document metadata and asset loading features in React aims to streamline the handling of resources and metadata in applications.

React's focus on consolidating documentation and improving tools like eslint plugin highlights an effort to enhance the developer experience and code quality.

The renaming of 'offscreen' to 'activity' indicates a refined approach to managing inactive parts of the application, showing React's continuous refinement of concepts.

Transcripts

before you get mad at me for the

thumbnail this is what Andrew Clark from

the react core team actually tweeted it

might not be quite as extreme but this

is some big news and I think we need to

talk about it because throwing away use

memo use call back memo forward ref

react. lazy use context throw promise

and context providers there's a lot

changing right now so what the heck's

going on why is all of this going to

change well first and foremost it's

important to know none of this has to

change you can continue using things the

way you currently use them and even in

new react versions you're going to be

fine I don't think they any intention to

deprecate the existing functionality at

any point you just won't necessarily

need the things on the left side here in

the future some of them are just

semantic changes like context. provider

becoming just context because you no

longer need to use context you can just

call use with the context there's also

has some performance benefits we'll talk

about in a bit but we need to read the

official update from the react core team

react Labs what we've been working on

February

2024 these blog posts are great and they

haven't been doing them quite as often

as I would have hoped like the last one

was was that a year ago yeah March 2023

was the last one so it's been almost a

year since the last of these updates

very thankful they're still happening

and also Dan still helping out the first

update is react compiler react compiler

is no longer a research project yeah we

mentioned that before in the Tweet as

discussed in their previous post about

it react can sometimes rerender too much

when State changes since the early days

of react our solution for such cases has

been manual memoization and our current

apis this means applying Ed memo use

callback and memo apis to manually tune

how much react reenders on St changes so

if you have an element that you don't

want to have render because the things

you're passing to it didn't change but

maybe a hook above that did you could

memorize the component you can memorize

the data there's a lot of places you can

throw these checks to keep those updates

from happening but even knowing that you

can do that much less how to do it and

how to do it properly is a big ask for a

Dev that's just trying to have an input

field that responds when they type I'm

very thankful to know that in the future

they won't have to do that without

having to adopt a whole different mental

model like signals oh look at that

they're saying the same thing here

manual memoization is a reasonable

compromise but we weren't satisfied our

vision is for react to automatically

render just the right parts of the UI

when State changes without compromising

a react Coral model first part is yeah

that's solid JS you can use other things

for this but wait without compromising

react's core mental model there's the

difference spelt and solid and all these

other Solutions have their own gotas

with how state is encapsulated how you

have to call things instead of using

values how equals is bound to weird

behaviors and spth all these types of

things that react as a pretty good job

of sidest stepping where I still feel

like react feels the most like just

JavaScript of modern Frameworks solid is

really close but react still as the the

most JS Vibe I get and that's a huge

part of their core mental model as well

as the composability of all these pieces

in the way that those interface together

back to the post we believe that reacts

approach UI is a simple function of

state with standard JavaScript values

and idioms is a key part of why react

has been approachable for so many

developers that's why we've invested in

building an optimized compiler for react

JavaScript is a notoriously challenging

language to optimize thanks to its loose

rules and dynamic nature react compiler

is able to compile code safely by

modeling both the rules of JavaScript

and the rules of react for example react

components must be item potent returning

the same value given the same inputs and

they can't mutate props or state values

these rules limit what developers can do

and help to carve out a safe space for

the compiler to optimize within of

course we understand that developers

sometimes bend the rules a bit and our

goal is to make react compiler work out

of the box on his as much code as

possible the compiler attempts to detect

when code doesn't strictly follow

react's rules and will either compile

the code where safe or skip compilation

if it isn't safe we're testing against

meta's large and varied code base in

order to help validate this approach

there is so much good information in

here so first off lint rules as a way to

make the code more optimizable that's a

bit scary we've all had lint rules that

prevent you from doing things that are

obviously not performant or have weird

side effects but the idea of lint rules

that are specifically to keep you within

the bounds of the Java JavaScript that

the react compiler is the most capable

of optimizing that's an interesting

concept like genuinely really

interesting and I'm curious how that

plays out the other part is that a lot

of your code isn't going to fall within

that optimizable set and when that

happens you can't just opt out of the

compiler entirely like how do you deal

with that I'm sure there's a lot of code

in the Instagram code base period but

importantly here there's a lot of code

in the Instagram codebase that probably

doesn't follow these rules exactly and

that's why this call out is so important

because if it works there and able to

make it work around those things maybe

you don't get the same performance win

but at least it's compatible that's huge

and historically react's been really

good about this in the past in the past

other Frameworks like angular when they

had major updates from angular js1 to

angular 2.0 you couldn't just use old

code in my always betting on react video

I did last year I gave the example of

taking a component from this blog from

2014 and putting it in a brand new app

router nextjs RSC project and actually

server rendering that ancient class

component react's historically been

incredibly backwards compatible which is

a huge part of why Hooks could take off

the way they did because I could just

update react versions all the old code

still worked but I could make new

components with hooks and even Mount old

components with classes inside of those

new components and intermingle them

effortlessly that's how I do things with

server components largely too it's

surprisingly easy to take code from the

old era and use it in this new stuff and

it all just works together like the Lego

bricks they built but if the compiler is

strict about what things it does and

doesn't support that all gets thrown

away which is why it's very good to hear

their building outs into the compiler

for developers who are curious about

making sure their code follows reacts

rules we recommend enabling strict mode

and configuring react's eslint plugin

these tools can help catch subtle bugs

in your react code improving the quality

of your applications today and future

proofs your applications for upcoming

features such as react compiler there's

going to be all the crazy like rules of

hooks and such I should do a longer Deep

dive on why those are important there

are some crazy optimizations with hooks

that yall don't even know about anyways

we're also working on Consolidated

documentation of the rules of react and

up updates to our esent plugin to help

teams understand and apply these rules

to create more robust apps really good

to hear that they're committed to making

esent experience much better previously

the react team hasn't been as focused on

these types of tools that are external

ecosystem things like es lint being

mentioned this much in a react post is

interesting to see even things like JS

do comments on the type definitions

aren't particularly interesting to the

react core team things like that tend to

fall on the shoulders of poor Matt pook

who's stuck making all of those

definitions himself but God bless him

for it those are going to be a very nice

IDE win see the compiler and action you

can check out our talk from last Fall

Again check out my video where I show

the cas this if you want to learn more

about it time of the talk we had early

experimental data from trying react

compiler on one page of Instagram since

then we've shipped the compiler to

production across all of instagram.com

we've also expanded our team to

accelerate the roll out to additional

services at meta and to open source

we're excited about the path ahead and

we'll have more to share in the coming

months oh boy I cannot wait for this to

be open sourced I am so curious about

the actual implementation details here

it's going to be a fun ride speaking of

fun ride let's talk about actions which

have been a particularly wild ride for

me we previously shared that we were

exploring solutions for sending data

from the client to the server with

server actions so that you can execute

database mutations and Implement forms

that's weird to reduce it to these two

examples there's a lot of other things

you want to do with an action I get what

you're saying though the idea of having

a a proper built-in primitive for the

client to send the data to the server

important stuff during development of

server actions we extended these API to

support data handling in client-only

applications as well oh boy they're

formally blessing the use case of using

server actions for client stuff huh we

refer to this broader collection of

features as simply actions actions allow

you to pass a function to Dom elements

such as form huh so this is for react L

JavaScript in a way hm the action

function can operate synchronously or

asynchronously you can Define them on

the client side using standard

JavaScript or on the server side with

you server directives when using an

action react will manage the life cycle

of the data submission for you providing

hooks like use form status or use form

state to access the current state and

response of the form action by default

actions are submitted within a

transition keeping the current page

interactive while the action is

processing since actions support async

functions we've also added the ability

to use async and await within the

transitions this allows you to show

pending UI with the is pending state of

a transition when an async request like

fetch starts and show the pending UI all

the way through the update being applied

I'll be honest the examples I've seen

thus far for use form status and use

form state are really hard to digest it

feels a little bit too much like magic

at the moment I need to make some really

good ones so I can both communicate it

better and confidently show it in my

videos just know if these hooks make you

feel a little dumb right now you're not

alone not only am I struggling to share

how they work as like an educator I

haven't really implemented them my apps

just yet so yeah if anyone on the r team

wants to bully me into using them let me

know use optimistic however also very

confusing I have used it it's really

powerful alongside actions we're

introducing a feature named use

optimistic for managing optimistic State

updates within this hook you can apply

temporary updates that are automatically

reverted once the final State commits

for actions this allows you to

optimistically set the final state of

the data on the client assuming the

submission is successful and revert to

the value of the data received from the

server it works using regular asyn a we

so it works the same whether you're

using fetch on the client or a server

action from the server Library authors

can Implement custom action equals

function props in their own components

with used transition our intent is for

libraries to adopt the actions pattern

when designing their component apis to

provide a consistent experience for

react Developers for example if your

library provides a calendar on select

event handler component consider also

exposing a select action equals action

API too this is really interesting I'm

I'm starting to see what they're going

for here right now if I have a component

that has a loading state in it and I

want to use that loading state to render

something differently above it that kind

of sucks to do you have to have crazy

call backs that are embedded in that

component the call back estate selector

in your parent in order to do all of

this now instead of that the actual

action I send to the thing is also

capable of doing the updating and

triggering that all the way up the tree

as far as I need to wherever it's going

to hit that use form status or use form

state or whatever of these helpers and

it means that these generics built into

react now have behaviors that interface

with children automatically that's

interesting I'm starting this is

starting to click for me while we

initially focused on server actions for

client side data transfer our philosophy

for react is to provide the same

programming model across all platforms

and environments when possible if we

introduce a feature on the client we aim

to make it also work on the server and

vice versa this philosophy allows us to

create a single set of apis that work no

matter where your apps run making it

easier to upgrade to different

environments later that's a interesting

way of putting it I kind of thought of

actions less as a react API more of a

recommended pattern where it's the the

method in which you bind things from the

server to the client so such that the

client can update them and send data to

the server it felt like it was

describing that relationship more than

it was describing the actual behavior of

the API it's interesting to see them

really double down on the API and how it

works within react I'm going to have to

play with this a lot lot more I really

feel like I need to understand those

hooks better so uh make sure you like

this video and you give me a

subscription because that's going to

take a lot of work new features in the

react Canary we've introduced react

canaries as an option to adopt

individual new stable features as soon

as their design is close to final before

they released in a stable sver version

canaries are a change to the way we

develop react previously features would

be researched and built privately inside

of meta so users would only see the

final polished product when released to

stable with canaries we're building in

public with the help of the community to

final features we share in the react

Labs blog Series this means you hear

about new features sooner as they're

being finalized instead of after they're

complete this is also huge because the

community can give a bunch of feedback

and push back on things like the

original RFC for Server components was

not great I didn't care I even in my

original video called out how dumb it

was that you couldn't async await and

just await a DB call inside of a server

component and they ended up rewriting

the proposal and making the whole thing

async A8 based without weird file

pathing these improvements only happen

if the community is involved in the

process otherwise there would be too

much commitment on a specific way of

doing things that no longer make sense

this is a huge part of how react will

continue to win and it's awesome that

they're letting the community be

involved it sucks that this has also

resulted in some fud where people feel

like you have to use a canary if you

want the new react features no you can

use the new react features when they're

stable but if you're willing to be part

of this experiment where we're learning

and figuring out all these pieces you

want to be there as we figure it out and

finalize it you can be now and there's a

whole process and opportunity here to do

just that and next was one of the few

that really jumped on that opportunity

server components asset loading document

metadata and actions have all landed in

the react Canary and we've added docs to

these features on react. deev the

directives we've talked about a bunch I

will very quickly say people seem to

think these two are like opposites of

the same thing where use servers for

Server components use clients for client

components they're not don't think that

check out any of my videos about server

actions in particular because these are

for functions that the client calls that

are on the server so if I want to post

things to a for or update my user

metadata or something like that use

servers for that that use client is when

I want the component to ship JavaScript

to the client so this is I want to ship

JavaScript to the client this is I want

the client to be able to ship data to

the server these aren't opposites

they're different behaviors entirely and

they're bundler features that happen to

be built around react that doesn't mean

only react can use them in fact solid is

starting to build U server into solid

start which is so cool to see other

Frameworks adopting the opportunities

here they Mark the split points between

the two environments use client

instructs the bundler to generate a

script tag similar to Aster's islands

where use tells the bundler to generate

a post environment like trpc mutations

I'm going to take a little moment of

Pride here the reason trpc made it here

is because trpc became a popular thing

that nerds like us talk about to discuss

modern best practices for full stack

webd trpc mutations and specifically

trpc got its first big break when I

started chilling it really hard and it's

so cool seeing trpc go from that weird

side project that I heard somebody

working on that originally came from the

guy who made Zed and got taken over by

Alex who pushed it incredibly far just a

typesafe way to write server functions

and call them in react query and now

it's this legendary moment of time where

we realize that the way we were

communicating between the server and

client was not ideal so much so that

it's being cited next to Astro in the

react blog post about what they're doing

it's so cool Dan abov himself even

tweeted basically this he probably wrote

this part to be honest he specifically

said that Astro islands are used client

and trpc mutations are you server which

is very good mapping if you know how

these two things work together they let

you write reusable components that

compose client side interactivity with

the related server side logic yes very

very cool stuff it's once it clicks it

you can't go back document metadata is

an interesting addition here too we've

added built-in support for rendering

title meta and metadata link tags

anywhere in your component tree these

work the same way in all environments

including fully client side code SSR and

RSC this provides built-in support for

features pioneered by libraries like

react helmet yeah RP helmet in all the

libraries that like did these things

differently if you're curious why this

matters it's cuz these all are supposed

to go in head which isn't your body

which is where react normally renders so

if you want to render a title in your

component where does that go when these

are part of the framework it will handle

that and throw it in the right place

that's why right helment was previously

so valuable because it would take the

thing you put in your jsx rendered in

the virtual Dom and instead of putting a

similar element in the real Dom it just

writes it to head instead that's why

it's helmet you can put it anywhere and

it goes on top asset loading we

integrated suspense with the loading

life cycle of resources such as

stylesheets fonts and Scripts so that

react takes them into account to

determine whether the content in

elements like a style a link or a script

are ready to be displayed we've also

added new resource loading apis like

preload and preinit to give greater

control for when a resource should load

and initialize this is some remix stuff

what's cool here is now if you were to

use suspense to wrap your page because

you didn't want to have things flash in

not only is suspense going to wait for

when the components get stream down it's

also going to wait for when your style

tags or similar things load in so you

won't have that flash of uny content

anymore because it won't flip to the new

content until the style tag is loaded

this is really cool and the fact that

they expose it as a generic API where

I'm assuming you can just declare

anything as a resource yeah such as

script Styles sheets and fonts as soon

as you know you need them that's really

cool so you can specify in other places

that this might be needed in the future

and preload it so that it's ready to go

when you make those transitions good

stuff I'm really happy that they're like

more deep in the documentation of these

things that's been a very reasonable

critique of this up until now where like

there's all these new things happening

we're seeing them on Twitter we're

seeing them in next but we don't know

how to use them where's the docs finally

we have some docs being linked actions

as shared above we've added actions to

manage sending data from the client to

the server you can add actions to an

element like a form you can access their

status with use form status you can

handle their result with use form State

and even optimistically update with use

optimistic when you put it that way it

sounds easy but uh the behavior of these

things is not as simple as I would like

more coming soon since all these

features work together it's difficult to

release them in the stable Channel

individually for example example

releasing actions without the

complimentary hooks for accessing the

form states that would just limit the

Practical usability of actions

introducing server components without

integrating server actions would

complicate modifying data on the server

as someone who shipped server components

without server actions God bless trpc

before we can release a set of features

to the stable Channel we need to ensure

they work cohesively and developers have

everything they need to use them in

production react canaries allow us to

develop these features individually and

release the stable apis incrementally

until the entire feature set is complete

the current set of features in react

canary are complete and ready to release

the next major version of react the

thing we are all here for after a couple

of years of iteration react at Canary is

now ready to ship to react at latest the

new features mentioned above are

compatible with any environment your app

runs in providing everything needed for

production use since asset loading and

document metadata may be a breaking

change for some apps the next version of

react will be a major version react 19

there's still more to be done preparing

for release in react 19 we're also

adding long requested improvements which

require breaking changes like support

for web components can't believe they're

actually doing this they've been punting

the ball on web components for so long

and I get why because they don't really

fit the react model great but sometimes

you have some crappy web component from

some third party provider like you're I

don't know your rate this out of five

that goes to some third party being able

to quickly embed that when everything

else is react that's nice I see why

they're finally caving here our Focus

now is to land these changes prepare for

release finalize docs for new features

and publish announcements for what's

included we'll share more information

about everything react 19 includes how

to adopt the new client features and how

to build support for Server components

in the coming months I haven't heard the

mention off screen screen in a while oh

boy this is a fun one it's been renamed

which is a good decision offscreen is

two in the weeds technically what the

hell are we talking about well let's

dive in since our last update we've

renamed a capability we're researching

from offscreen to activity the name

offscreen implied that it only applies

to parts of the app that were not

visible but while researching the

feature we realize it's possible for

parts of the app to be visible and in

active such as content behind a modal

the new name more closely reflects the

behavior of making certain parts of the

app active or inactive activity is still

under research and our remaining work is

to finalize The Primitives that are

exposed to library developers we've de

prioritized this area while we focus on

shipping features that are more complete

I'm happy they they called this out

because offscreen has not been mentioned

much the best I will poorly teal the art

here is it gives you a way to run things

in the background such that they're not

blocking the main react thread but

they're still going on so when you

change views like you have a canvas

that's been hidden updating in the

background and then it reappears that

it's synced already without having to

render everything you can keep running

the virtual Dom without having the real

Dom update until you choose for the real

Dom to update kind of in its own thread

it's it's a lot in addition to this

update our team has presented at

conferences and made appearances on

podcast to speak more on our work and

answer questions really good stuff here

the two reacts post I have a video about

that that was really good too lots of

cool stuff here I need to pull these

people on the show more normally I just

DM them a bunch and then shout at a

camera later on but this is a great post

really thankful they've been writing

these again h shout out to the whole

team everybody involved both with the

communication of these things as well as

actually making these changes possible

well uh that was quite an update let me

know what you guys think in the comments

and until next time see you later peace

nerds