2022年最新Reactトレンド

Reactをはじめとするフロントエンドの技術スタックの移り変わりは非常に激しく、次々と画期的な技術が台頭してきています。この記事では2022年時点でのReact開発の最新トレンドを紹介します。

next.jsの台頭とReduxとの相性
2020年からの最大の変化はサーバーサイド・レンダリング（SSR）が必須となったことです。もはや単なるSEOトリックやパフォーマンス最適化手法ではなく、業界標準になりつつあります。SSRがなければ、コアウェブバイタルと呼ばれる最新のGoogleランキングシステムで良いスコアを得ることはほぼ不可能です。
ReactベースのSSRアプリを構築するための重要なフレームワークは、Next.jsで今のところこれに代わるものはありません。Next.jsの問題は、ほとんどの大規模アプリが依然として必要としている、Reduxのような中央の状態管理です。
Reduxの課題は、クライアントサイドで使用されることを前提としていることです。サーバー上でページをレンダリングするたびに、新しいReduxストアを作成し、それを既存のクライアントステートとマージする必要があります（ハイドレーション）。ハイドレーションはトリッキーでエラーが起こりやすいものです。これへの最良のアプローチは、getInitialPropsデータ取得メソッドで最初のレンダリングをSSRで行い、新しいクリーンなReduxストアを作成し、その後クライアントサイドのレンダリングのみを行うことです。

非同期はSagaがいいよ
REST API（WebSocketも）を扱うReduxのミドルウェアは、古き良きRedux-Sagaモジュールを使うことをお勧めします。学習コストは高いですが、UIとビジネスロジックをうまく分離し、複雑なビジネスロジックをシンプルに管理できます。
Reactの動向を追っていると、データ取得のロジックをコンポーネントレベルに移そうという声があることに気づくかもしれませんが、これはReduxを撲滅する試みでしかないでしょう。大規模なアプリでは、その実利があるとは思えません。UIとデータ取得ロジックの分離は、アプリの信頼性を高め、開発者の体験を向上させます。
Redux-SagaをNext.jsと一緒に使うと、データ取得/ナビゲーションの戦略を簡単に選べるというメリットもあります。

UIライブラリ
今日世界でリーダーとなっているのは、ChakraUIです。以前はMaterial UIが有力だったのですが、最近ではトレンドが移りつつあります。Chakraは、基本的な無料要素だけでなく、有料のProバージョンでプリビルドされたテンプレートも提供しています。Pro版のテンプレートを使えば、Figmaや他のデザインツールを使わずに、数日でEコマースのウェブアプリのUIを作成できます。

フォームライブラリ
オリジナルのReduxフォームの後、短期間人気のあったオプションはFormikでした。Formikの問題は、Render Propsパターンを使っていることでした。このパターンはかつてトレンディだと主張され、それゆえ多くのモジュールに使われましたが、長くは続きませんでした。私はこのパターンは混乱すると思いますし、複雑なアプリでは、コードの中で何が起こっているのかを確認するのが難しくなります。
Formikや以前のフォームライブラリの問題に対処するために、新しいプレーヤーが登場し、現在活発に勢いを増しているのがReact Hook Formです。シンプルさと優れたドキュメントが、このライブラリの大きな特徴です。

参考: https://javascript.plainenglish.io/enterprise-react-in-2022-3126ed43ba58