React 19 Is Here - Are You Ready?

Summary

Reactチームのアップデートについて解説。React Compilerが新機能として導入され、将来的には手動でのコンポーネントのメモ化が不要になる可能性がある。また、React Labsのブログで取り上げられたアクションとオプティミスティックステートの改善、そしてReact Canaryの紹介。React 19のメジャーアップデートも予告され、Web Componentsのサポートや非表示のオブジェクトの活性化管理など、新たな機能が追加される。

Takeaways

• 📣 Reactの将来の変更について話し合い、重要なアップデートが予定されていることが明らかになった。
• 🚀 React Compilerは研究プロジェクトではなくなり、Reactの再描画を最適化することを目指している。
• 🎯 手動でのメモ化は合理的な妥協であるが、ReactチームはUIの正確な部分だけを自動的に再描画することを目指している。
• 🔍 ReactのコンパイラはJavaScriptのルールとReactのルールをモデル化してコードを安全にコンパイルすることができる。
• 📈 Reactは downwards compatibleを重視しており、過去のコードが新しいバージョンでも動作することを保証している。
• 🔧 ReactのStrict ModeとESLintプラグインを使用することで、コードの品質を向上させ、将来の機能に備えることができる。
• 🌟 Actionsと呼ばれる新機能が導入され、クライアントからサーバーへのデータ送信を容易にすることができる。
• 🔄 UseOptimisticと呼ばれる新しい機能が導入され、最適な状態の更新を管理することができる。
• 📚 React Canaryという新しい機能が導入され、開発者は安定版リリース前に新しい機能を試することができる。
• 💻 Document MetadataとAsset Loadingの機能が強化され、Reactがタイトル、メタタグ、 Stylesheets、Fontsなどのレンダリングをサポートする。
• 🔧 React 19が次のメジャーバージョンとして準備されており、Web Componentsのサポートや破壊的な変更が含まれる予定である。

Q & A

Reactチームが今後も継続してサポートする機能は何ですか？

Reactチームは、既存の機能を継続してサポートする予定であり、将来的に不要になる可能性があるものの、現在は引き続き使用することができます。

Reactのコンパイラに関してどのような変更が行われていますか？

Reactコンパイラは研究プロジェクトではなくなり、より多くのコードを安全にコンパイルすることが可能となり、パフォーマンス向上が期待されています。

ReactのコンパイラがどのようにJavaScriptを最適化するのでしょうか？

Reactコンパイラは、JavaScriptのルールとReactのルールをモデル化してコードを安全にコンパイルすることができます。

Reactのコンパイラが正しいルールを追うコードを検出できない場合、どのように対応するのでしょうか？

コンパイラは安全ではない場合、コンパイルをスキップすることがあります。

Reactチームが今後もバックwards compatibilityを重視していることをどのように示しているのですか？

Reactチームは、過去のバージョンのコードが新しい環境でも動作することを重視しており、将来のアップグレードを容易にしています。

React Canaryとは何ですか？

React Canaryは、安定版リリース前に個別の新機能を採用するためのオプションであり、コミュニティによるフィードバックを活用して機能を最終化します。

React 19の主な新機能は何ですか？

React 19では、アセットローディング、ドキュメントメタデータ、アクションなど、複数の新機能が含まれます。また、Web Componentsのサポートも予定されています。

アクション機能が導入されることで、どのような利点がありますか？

アクション機能を使うことで、クライアントからサーバーへのデータ送信を管理し、標準的なJavaScriptまたはサーバーディレクティブを使用して定義できます。

useOptimisticと呼ばれる新しい機能は何ですか？

useOptimisticは、アクションを使用した最適な状態の更新を管理するための機能であり、最終状態を仮に更新して、サーバーからデータを受け取った後で自動的に元に戻すことができます。

Reactチームが今後もコミュニティへのフィードバックを重視していることをどのように示していますか？

Reactチームは、React Canaryを使用してコミュニティによるフィードバックを活用し、機能を最終化しています。また、今後もコミュニティの意見を取り入れる予定を発表しています。

offscreenからactivityへと名前が変更された理由は何ですか？

offscreenは非表示部分に適用されることを示唆する名称であり、しかし実際には表示されているがアクティブではない部分（例えばモーダルの背後にあるコンテンツ）も対象とすることができました。

Outlines

00:00

📢 Reactの主要な変更点についての解説

このパラグラフでは、Reactの核心チームが大規模な更新について発表したことに焦点を当てています。具体的には、useMemo、useCallback、memo、forwardRef、React.lazy、useContext、throw promise、およびcontext providersなどのフックスとAPIが将来的には不要になる可能性があるという話題です。これらの変更にも関わらず、既存の機能が非推奨になることはなく、新しいReactのバージョンでも従来のコードは引き続き機能するでしょう。主な変更点は、パフォーマンスの向上と開発者の利便性の向上に焦点を当てたもので、Reactコンパイラの導入が特に注目されています。これにより、開発者は手動でのメモ化を行わずに、Reactが適切なUI部分のみを再レンダリングするように自動最適化されます。また、ESLintルールの導入が開発者がより最適化されたコードを書くのを助けると期待されています。

05:01

🔄 Hooksとサーバーコンポーネントの相互運用性

このパラグラフでは、HooksがどのようにしてReactのバージョン間での互換性を保ちながら発展してきたかについて説明しています。特に、古いコードが新しいバージョンのReactで問題なく動作すること、および古いコンポーネントを新しいHooksベースのコンポーネント内で使用できることが強調されています。さらに、Reactコンパイラの厳格なサポートが既存の相互運用性を損なうことなくどのように組み込まれているかについても触れられています。また、ESLintとstrictモードを活用することで、開発者がReactのルールに従ってより堅牢なアプリケーションを構築できるようになることが説明されています。

10:02

🆕 新しいReact Canaryの機能とサーバーコンポーネント

このパラグラフでは、React Canaryの導入とその利点に焦点を当てています。Canaryバージョンは、コミュニティのフィードバックを得ながら公開的に機能を開発し、最終的な機能を完成させる新しい開発手法です。特に、サーバーコンポーネント、アセットローディング、ドキュメントメタデータ、およびアクションの導入が注目されています。これらの機能は、クライアントとサーバー間のデータ送信の管理、リソースの事前ロード、およびアプリケーションのメタデータ管理を簡素化します。また、Reactが全ての環境で一貫したプログラミングモデルを提供することの重要性についても触れています。

15:04

🚀 React 19の概要と将来のアップデート

このパラグラフでは、React 19への移行と、それに含まれる新機能について説明しています。特に、Reactのメジャーバージョンアップに伴うウェブコンポーネントのサポート追加や、アセットローディングとドキュメントメタデータの統合など、いくつかの機能が破壊的変更として扱われることが強調されています。また、新しい開発フィロソフィーとして、React Canaryを通じてコミュニティと共に機能を開発し、フィードバックを得ることの重要性にも触れられています。

20:04

👋 ビデオの締めくくりと視聴者へのメッセージ

最終パラグラフでは、視聴者に向けての簡潔なメッセージが述べられています。Reactに関する大きな更新と変更点についての詳細な説明を終えた後、視聴者にコメントでの意見や質問を求め、次回の更新までの別れの挨拶をしています。この部分は、視聴者との対話を促進し、コミュニティの一員としての参加を奨励することを目的としています。

Keywords

💡React

Reactは、Facebookが開発したJavaScriptライブラリで、ウェブアプリケーションの開発に利用されます。この動画では、Reactの新しい機能や改良点について説明されています。

💡React Compiler

React Compilerは、Reactアプリケーションのパフォーマンスを向上させるために開発されているコンパイラです。JavaScriptの動的な性質を考慮に入れた最適化を行って、再描画を減らすことでパフォーマンスを向上させます。

💡Hooks

Hooksは、React 16.8で導入された機能で、クラスコンポーネントの概念を使わずに、状態や副作用を扱うことができます。この動画では、新しいHooksの紹介や、既存のHooksの使用が変更される可能性について触れられています。

💡Server Components

Server Componentsは、Reactの機能で、サーバー側でのみ実行されるコンポーネントを作成することができます。これにより、サーバーとクライアントの負荷を適切に分担し、パフォーマンスを向上させることができます。

💡Actions

Actionsは、Reactの新しい機能で、クライアントからサーバーへのデータ送信を管理するために使用されます。フォームの送信やデータベースの変更を実行するために使用できます。

💡Offscreen

Offscreenは、Reactの開発中機能であり、画面に表示されていないコンポーネントの更新を背景で行うことができます。これにより、コンポーネントが再表示されるときに即座に利用できるようにすることができます。

💡Suspense

Suspenseは、React 16で導入された機能で、データの取得やコンポーネントの読み込み中にローディング状態を表示することができます。これにより、ユーザー体験を向上させることができます。

💡Document Metadata

Document Metadataは、Reactの新機能で、コンポーネントツリーの任意の場所で、titleやmetaタグをレンダリングすることができます。これにより、SEOやメタデータ管理を効率化できます。

💡Asset Loading

Asset Loadingは、Reactの新機能で、スタイルシートやフォント、スクリプトなどのリソースの読み込みライフサイクルを管理することができます。これにより、リソースの読み込みタイミングをコントロールし、パフォーマンスを向上させることができます。

💡React 19

React 19は、Reactの次のメジャーバージョンで、新しい機能や改良点を含んでいます。このバージョンでは、Web ComponentsのサポートやBreaking Changeが含まれています。

💡Activity

Activityは、Reactの開発中機能で、アプリケーションの特定の部分をアクティブまたはインアクティブに制御することができます。これにより、背景での処理を続けたり、モーダルの背後に表示されているコンテンツを制御することができます。

Highlights

Manual memoization in React is being replaced by an optimized compiler for better performance and automatic rendering.

React compiler is designed to work safely by modeling JavaScript and React rules, aiming to automatically render only the right parts of the UI when state changes.

React's historical backwards compatibility is emphasized, with the new features aiming to maintain this for ease of adoption and transition.

Lint rules are introduced as a way to make code more optimizable by adhering to React's rules, with tools like strict mode and React's ESLint plugin recommended for developers.

The React team is working on consolidated documentation of React's rules and updates to the ESLint plugin for better development experience.

Actions are introduced as a feature for sending data from the client to the server, with built-in lifecycle management and hooks for form status and state.

UseOptimistic hook is introduced for managing optimistic state updates, allowing temporary changes that revert once the final state commits.

Server components and asset loading have landed in React Canary, with documentation and support for production use.

React 19 will be a major release, including long-requested improvements like support for web components and breaking changes.

The React team is focusing on finalizing the Activity feature (formerly known as Offscreen), which allows parts of the app to be active or inactive without blocking the main thread.

React canaries are introduced for community involvement in the development process, allowing for feedback and experimentation with new features before stable release.

The React team emphasizes the importance of not just React APIs, but the mental model and composability that makes React approachable for developers.

The React compiler has been successfully implemented across all of instagram.com, showcasing its potential for real-world application at scale.

The React philosophy of providing a single set of APIs that work across all platforms and environments is highlighted, aiming for consistency and ease of future upgrades.

The React team is working on improving the developer experience with better tooling and IDE support, making the development process more efficient and enjoyable.

The React team's commitment to open-sourcing the compiler and expanding the team to accelerate its rollout is mentioned, showing a dedication to community and collaboration.

The update emphasizes the importance of community involvement in the React development process, highlighting the impact of feedback on the evolution of features like server components.

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