Reactの次期Version Upについての情報が出ましたね!
簡単にまとめたいと思います!
React Compiler ( React Forget )
いわゆる"Memoization"に関して、useMemo
、useCallBack
そして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としてリリースされるそうです。
useFormState
、useFormStatus
のHookも追加され、通信状態や結果をClientサイドで取得可能です。
また、useOptimistic
も追加され、例えば、Submitするデータを一時的に正として表示し、Submit結果が返ってきたらその値を表示するということが可能になります。
詳細は以下をどうぞ!
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のリリースを心待ちにしましょう!