ヌギー(nugey)Ask Nugey

React 19がもうすぐ出るらしい

# React

目次

React 19の内容を翻訳してみた

公式のブログでReact 19のアナウンスが出ました。

この内容をChatGPTでなるべく端的にまとめました。以下、翻訳兼要約になります↓

React Labs: 私たちが取り組んでいること – 2024年2月 – React

2024年2月15日にJoseph Savona、Ricky Hanlon、Andrew Clark、Matt Carroll、Dan Abramovによって記されました。

React Labsでは、私たちは現在研究開発中のプロジェクトについての進捗を共有しています。前回の更新から、私たちは大きな進歩を遂げており、これらの進展を皆さんと共有したいと考えています。

注目: 2024年5月15日から16日にかけて、ネバダ州ヘンダーソンでReact Conf 2024が開催されます。対面での参加を希望される方は、2月28日までにチケットの抽選にサインアップすることができます。チケット、無料ストリーミング、スポンサーシップに関する詳細はReact Confのウェブサイトをご覧ください。

React Compiler

現状

React Compilerはもはや研究プロジェクトではなく、現在instagram.comの本番環境で稼働しています。Metaでの追加プラットフォームへの展開と最初のオープンソースリリースの準備が進められています。

目的

前回の投稿で説明したようにReactの以前のバージョンでは、状態が変化すると不必要に多くの再レンダリングが行われることがありました。これを解決するためにuseMemo、useCallback、memoといったAPIを使用して手動でメモ化する手法がありましたが、これはコードを複雑にし、正確に実行するのが難しいものでした。React Compilerの目的は、Reactが状態の変化に応じてUIの必要な部分だけを自動的に再レンダリングすることで、このプロセスを簡素化し、Reactの核となる思想を保持することです。

技術

React Compilerは、JavaScriptのルールと「Reactのルール」の両方をモデル化して、安全にコードをコンパイルします。このアプローチにより、Reactコンポーネントが冪等であること、つまり同じ入力に対して同じ値を返し、propsや状態の値を変更しないことを保証します。

サポート

開発者が自分のコードがReactのルールに従っていることを確認できるように、Strict ModeとReactのESLintプラグインの使用を推奨しています。これらのツールは、今日のアプリケーションの品質を向上させるだけでなく、将来の機能向けにアプリケーションを準備します。

コンパイラの動作を確認するには、昨年秋の講演をご覧ください。

Actions

開発

以前、Server Actionsの開発を通じて、私たちはAPIをクライアント専用アプリケーションのデータ処理をサポートするように拡張しました。

使用例

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

この例では、<form/>を使用してユーザーのクエリに基づいた検索を実行します。

機能

アクション関数は、同期的または非同期的に操作を行うことができます。Reactは、データ送信のライフサイクル全体を管理し

、開発者がフォームアクションの現在の状態や応答にアクセスできるようにします。

目的

ライブラリがコンポーネントAPIを設計する際にActionsパターンを採用し、React開発者に一貫した体験を提供します。

React Canaryの新機能

React Canariesを導入し、設計がほぼ最終的なものに近づいた新機能を早期に採用するオプションを提供しています。これにより、Reactの開発プロセスが変更され、コミュニティと共に公開で機能を構築しています。

機能一覧

  • React Server Components
  • Asset Loading
  • Document Metadata
  • Actions

これらの新機能に関するドキュメントはreact.devに追加されています。この機能が連携して動作するため、個々にStableチャネルでリリースすることは困難ですが、開発者が早期にフィードバックを提供する機会を提供します。

結論

React Labsでは、開発中のプロジェクトについて進捗を共有し、Reactの将来に向けて新しい機能を開発しています。これらの機能は、開発者がより効率的にアプリケーションを構築し、ユーザー体験を向上させることを目指しています。React Conf 2024でのさらなる発表を楽しみにしています。