こんにちは、株式会社TERASSでコードを書いている坊主、shuji-koikeです。
次期Reactの新機能が話題になっていますが、日本語の情報がまだあまりないようだったので拙い記事ですがまとめてみました。
The Next Major Version of React
Reactの開発チームが過去数年間に渡ってreact@canaryチャンネルで開発を進めてきた新機能をreact@latestとしてリリースする準備が整ったようです。
そしてそれらの新機能をreactの次期メージャーバージョンとなるReact 19としてリリースする準備には入ったものの、ドキュメントの整備など正式なリリースまでにはまだ時間がかかるようです。
元記事とは順番が逆ですが、ここからreact@latest、そしていずれreact@19としてリリースされる予定の新機能の一部を要点をまとめて紹介していきます。
React Compiler
react@18以前のFunctional Componentで不要なレンダリングを抑制するには、useMemo、useCallbackとmemoを組み合わせて使う「メモ化(memoization)」呼ばれる手法によって、明示的に（手動で）チューニングを施す必要がありました。
メモ化はコードベースを煩雑にするだけでなく、間違った使い方をして不具合の原因になったり、意図した通りに最適化の効果が得られていなかったり、reactを使う上で最も難しい課題の一つだと思います。
React Compilerはメモ化をすることなく、レンダリングを抑制するチューニングを内部的に自動で行ってくれる機能です！
最適化の恩恵を受けるにはいくつかルールがあるようですが、props,stateに破壊的な変更を加えないこと(immutable)や、コンポーネントが冪等(idempotent:同じpropsを渡したら毎回同じ結果を返す)であることなど、reactを使った開発における基本とも言えるルールさえ守っておけば良いみたいです。
さらに、もしそのようなルールに従っていないコンポーネントがあったとしても、React Compilerが問題を検知して、最適化の対象から外すことで不具合に繋がるのを防ぐ仕組みまであるようです！
データをfetchするようなコンポーネントで冪等性を担保するのは難しいかもですが、そのようなコンポーネントを除外してよしなに最適化をしてくれるのだとしたら、これはreactに革命的な変化をもたらしてくれると期待しています！！！
Actions
Actionsは最新のNext.jsでは既に利用可能なServer Actionsに加えて、その機能の一部を拡張して、SPAのようなクライアント（ブラウザ）側だけのコードでも使えるようにした新機能の総称です。
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
form要素のaction属性にfunctionまたは非同期のasync functionを渡せるようになり、"use server"ディレクティブを使ってサーバ側で実行されるServer Actionを実装したり、サーバ側の処理を呼び出すような非同期処理をactionとして渡せるようになります。
また、actionに渡した処理の状態管理をするためのuseFormStatus、useFormStateやuseOptimisticなどのhooksが導入されるほか、react@18で導入済みのuseTransitionが非同期処理を扱えるようになる修正が入るようです！
それぞれの機能の具体的な使い方については自分も十分に把握できてないのでこの記事では説明できません🙇
フォーム系のライブラリ（プラグイン）に頼らなくても、簡易なフォームを手軽に実装できるようになったら嬉しいですね！
Offscreen (renamed to Activity)
Offscreenは非表示になったコンポーネントをパフォーマンスの面で効率的に扱うための機能で、非表示にするコンポーネントを破棄(unmount)せずに、レンダリングの優先度を落としつつ維持できるため、再表示の際にstateを維持したまま、ゼロからレンダリングすることなく再表示できるようになります。
この機能は非表示なコンポーネントだけでなく、モーダルの背後に表示されているコンポーネントなど、表示されてはいるけど非活性なコンポーネントのチューニングにも活用できるということで機能の命名を変更することになったようです。
New Features in React Canary
他にも様々な新機能がReact Canaryに取り込まれています。
これらが新機能の全てではありませんが、理解できた範囲で簡単にまとめます🙇
Directives: "use client" and "use server"
先出の"use server"や"use client"はNext.jsのようなフルスタックフレームワークで利用するための機能です。
Next.jsはまだ正式にリリースされていないReactの機能を内部的に使っていますが、それが正式にリリースされるということですね！Next.jsをより安心して使えるようになるだけでなく、Reactチームが深く関わっているNext.jsだけでなく他の様々なフレームワークでも、正式リリースによって仕様が固まりドキュメントが提供されることで、これらの機能がより利用しやすくなります！
Document Metadata
<title>、<meta>、<link>など、これまではReact Helmetのようなライブラリを使って実装する必要があった機能がReactに組み込まれるようになるようです！
Asset Loading
<style>, <link>, <script>などアセットを扱うタグがSuspenseを使って非同期に扱えるようになるようです！
以上、React 19で導入される予定の新機能をざっくりと紹介しました！
これらが新機能の全てではないですし、全てがリリースに含まれることが確定している訳でも（おそらく）ない点に注意が必要です。react@canaryの機能がreact@latestにマージされるということは、新機能の仕様がほぼほぼ確定して正式リリースに一歩近づいたということです！
過去の傾向からするとReact 19は今年中に出ればいいかなくらいの温度感で気長に待つのが良いかと思われます😆
色々魅力的な機能が追加されるようで待ちどうしいですが、個人的はReact Compilerが一番楽しみです！
時間があったら深掘りして記事を書きたいと思います！Likeボタンを押して応援お願いします💕
株式会社TERASSのテックブログです。TERASSでは「いい不動産取引は、いいエージェントから。を当たり前にするプラットフォームをつくる。」をミッションに、次世代不動産エージェントファーム「TERASS」や、優秀なエージェントとのマッチングプラットフォーム「Terass Offer」などを開発・運営しています。
Discussion
ちょっと前まで16だったのにもう19ですか…