はじめに
こんにちは。ここ最近、React v19が注目を集めているように感じます。 最近ではついにReact v19のRCバージョンもリリースされました。
Just published React 19.0.0-rc.0.
— Andrew Clark (@acdlite) 2024年6月3日
This is the exact build we'll release as 19.0, unless an issue is reported that requires a breaking change.
Thank you to everyone who helped us get the release into shape!
そう遠くないうちにReact v19がリリースされる可能性もありそうです。そこで、React v19のリリースによる周辺ライブラリへの影響などについて、弊社で採用しているライブラリを中心に調査をしてみました。この記事ではその内容をまとめます。
ESLint
React Compiler向けのESLintプラグインが公開されているようです。
React Compilerとは？
React CompilerとはReactアプリケーションの最適化をおこなってくれるツールです。このReact Compilerの利用には、現状ではReact v19のRCバージョンが必要とされます。
※React Compilerはまだ実験的ツールであり、今後、大きな変更などが入る可能性もあります。
ReactにはuseMemoやReact.memoなどの最適化方法が提供されていますが、正しく扱うのは難しかったり、また、適用をし忘れることなどもあります。React Compilerはこれらの適用を自動化してくれます。
ただし、React Compilerが動作するためには、コードベースがRules of Reactに従っている必要があります。Rules of Reactとは自然なReactコードを記述するために従うべきとされているルールです。
eslint-plugin-react-compilerについて
Reactの公式からeslint-plugin-react-compilerというプラグインが公開されています。このプラグインはRules of Reactに従っていないコードを検出してくれます。そのため、このプラグインを導入しておくことで、将来的にReact Compilerの導入などがスムーズに行いやすくなりそうです。React Compilerそのものはまだexperimentalなので現時点での導入は避けた方が安全だと思いますが、このeslint-plugin-react-compilerについては比較的試しやすいとも思うので、早いタイミングで導入してしまってもよいのかもしれません。
(注意) Reactの公式ドキュメントでは、「eslint-plugin-react-compilerによってRules of Reactへの違反が検出されたとしても急いで直す必要はない」ということが言及されています。少しずつ段階的に修正をしていくのがよさそうです。
You don’t have to fix all eslint violations straight away. You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
TanStack Query
React v19への対応状況について
以下のPRでReact v19のサポートに向けた対応が入っており、すでにリリースもされているようです。(v5.39.0)
また、上記のPRではeslint-plugin-react-compilerも導入されており、React Compilerに向けた準備なども既に考慮されているようです。
TanStack Queryについては既にかなり準備が進んでいそうな印象です。
React v19による影響について
上記のDiscussionページによると、React v19で導入予定のuseとの統合のためuseQueryの戻り値にpromiseプロパティを追加することなどが検討されているようです (https://github.com/TanStack/query/discussions/7074#discussioncomment-8748245)
const { promise } = useQuery(options); const data = use(promise);
React Router
React v19による影響について
React v19におけるtransitionでのasync関数のサポートに合わせて、React Routerではnavigateやsubmitなどの各種APIがPromiseを返すようにする対応が検討されているようです。
これらの変更はReact Routerのv7で入る想定のようです。
React Hook Form
React v19への対応状況について
peerDependenciesでReact v19を許可する対応が導入されており、すでにReact v19への対応が視野に入れられているようです。(v7.52.0)
React v19による影響について
React v19で導入予定のAPIとの統合に関するDiscussionページが作成されています。
まだ具体的な計画や構想などはなさそうなのですが、https://github.com/orgs/react-hook-form/discussions/11832#discussioncomment-9450350のコメントでは以下の動画が紹介されています
この動画ではuseActionStateとReact Hook Formを統合する方法などについて紹介されています。現状、ある程度工夫が必要そうな状況のようです。先ほどのDiscussionページにおいてもReact Hook Formからも何かしらの解決策があるとよさそうというような意見はありますが、まだ現状ではどうなるのかはわかりません。
@sentry/react
React v19による影響について
React v19サポートに向けたissueが作成されています。
React v19ではonCaughtErrorやonUncaughtError, onRecoverableErrorなどのオプションがcreateRootや hydrateRootに追加されます。これらのオプションでの利用が想定されたSentry.reactErrorHandler()というAPIが追加されています (v8.6.0)
import { createRoot } from 'react-dom/client'; import * as Sentry from '@sentry/react'; const root = createRoot( document.getElementById('app'), { onCaughtError: Sentry.reactErrorHandler(), onUncaughtError: Sentry.reactErrorHandler(), onRecoverableError: Sentry.reactErrorHandler(), }, );
onCaughtErrorやonUncaughtErrorは全てのコンポーネントに対して適用されるため、もしよりきめ細かな制御が必要な際は、既存のSentry.ErrorBoundaryの利用が推奨されるようです。
React Testing Library
React v19への対応状況について
すでにReact v19のCanary版を使ってテストが行われているようです。
また、React v19のアップグレードガイドにはreact-dom/test-utilsがreactへ移動されると記述されています。React Testing Libraryはこの変更の影響を受けそうです。
この変更についても既に対応が行われているようです。
Recoil
React v19への対応状況について
以下のissueでReact v19サポートに関する要望があります
ただし、対応についてはまだ進められているわけではなさそうです。このissueで積極的に発言されているwojtekmaj氏によると、やや開発も停滞しており別の選択肢への移行も考慮するよう提案されています。やや芳しくはなさそうな状況には見えました…(https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312)
React Redux
React v19への対応状況について
以下のPRでReact v19に関する対応が進められていそうです。PR上のTODOリストについては一通り消化されている状態のようなので、着実に対応が進められているような印象です。
MUI (Material UI)
React v19への対応状況について
React v19の対応に関するissueが先月に公開されています。React v19の型定義との互換性の改善やReact Compilerによる最適化を活用するためにRules of Reactへの対応などが計画されているようです。
eslint-plugin-react-compilerについてはすでに導入(#42555)されており、少しずつ対応が進められていく想定のようです。
@apollo/client
React v19への対応状況について
最近リリースされたv3.10.5から、React v19を使ったテストが開始されています。
また、ロードマップによると、React Compilerのサポートに向けてuseQueryとuseSubscriptionを書き直す計画があるようです
おわりに
今回、調査にあたって色々と調べて見たのですが、その中でも特にeslint-plugin-react-compilerは便利そうに感じました。Rules of Reactにできる限り準拠をしておくことで、将来的なReactに導入される様々な変更にも追従しやすくなることが考えられます。またESLintプラグインとして提供されているため、比較的、導入などのハードルが低めなことも魅力的に感じました。そのため、早めのタイミングで導入を検討してみてもよいのかもしれないと思いました。
この記事で紹介したもの以外にも、様々なライブラリでReact v19へ向けた対応や新機能の追加などが想定されます。より開発に便利な機能などが追加される可能性もあるため、今後も引き続き注目していきたいです。
