15
8

React V19に追加される機能(予定)

Last updated at Posted at 2024-02-29

Reactの次期Version Upについての情報が出ましたね!

簡単にまとめたいと思います!

React Compiler ( React Forget )

いわゆる"Memoization"に関して、useMemouseCallBackそしてmemoを書かずとも、React Compilerが同等の処理をJavaScriptにコンパイルしてくるとのことです!

Our vision is for React to automatically re-render just the right parts of the UI when state changes, without compromising on React’s core mental model.

とても心強いですね。

もちろん、"Memoization"のみが不要なRe-renderに影響を与えるわけではないですが、ここの自動付与により、コード可読性アップや、より関心の高いパフォーマンス課題に注力できますね。memoの一文でパフォーマンスが激的に改善された経験があるのでとても楽しみです。

また、コンパイル時の静的チェックに関しても、<StrictMode>eslint-config-react-appで設定されるようなルールに沿っていれば、将来的なコンパイル処理にも適応できるとのことです。

React Forgetに関するデモはこちらから!

Actions

Next.Jsでは既におなじみかもしれませんが、React的に正式Versionとしてリリースされるそうです。

useFormStateuseFormStatusのHookも追加され、通信状態や結果をClientサイドで取得可能です。

また、useOptimisticも追加され、例えば、Submitするデータを一時的に正として表示し、Submit結果が返ってきたらその値を表示するということが可能になります。

詳細は以下をどうぞ!

useFormState

useFormStatus

useOptimistic

use client use server

こちらもNext.Jsでは安定板として使われていますが、ReactとしてはCanaryです。それらが、正式Versionとしてリリースされるので、Next.Js以外のReact Frameworkでも利用がさらに加速されますね!

Document Metadata

React Helmetよ、さようなら、いままでありがとうです。

CSP追加などもBuilt-inで簡単にできそうですね!

Asset Loading

Suspenseをリソースライフサイクルにも統合し、<style><link><script>などのリソースローディング周りをもっとコントロールできるようになるようです。

Web Component

Web Componentへのサポートも対応するそうです。

恥ずかしながら、"Web Component"という言葉を初めて聞きました。調べてみます!

最後に

At the time of the talk, we had early experimental data from trying React Compiler on one page of instagram.com. Since then, we shipped the compiler to production across instagram.com.

React Forgetに関しては、instagramに統合済み、

The current set of features in React Canary are complete and ready to release.

現在のCanary versionもOKとのことなので、V19のリリースを心待ちにしましょう!

15
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
8