[Zenn Books] コードで比較！ React19を執筆しました。

こんにちは。FEチームのMapleです。私たちのチームは、現在のアーキテクチャを見直し、Reactを用いた新しいアーキテクチャへの移行を行うプロジェクトを開始しました。
React19の知見をチーム全体で向上させるため、読み合わせの為に執筆を行いました。

---

初のZenn Books執筆

https://zenn.dev/maple_siro/books/78697879365809
React 19では、様々な機能が追加されています。 説明する記事を書こうと思ったら、相当行数になりそうだな〜と思ったのがきっかけですね。
チャプターで分かれているので、見やすさもあると思います。

以下で全チャプターを簡単に説明しようと思います。

---

1. 新しいReactとReact Compiler

この章では、React 19に新たに導入されたReact Compilerについて説明しました。

• React Compilerの役割
  • コンパイル時に最適化を施すことで、パフォーマンスの向上や不要なレンダリングを削減できる点に注目しました。
• コード比較での解説
  • 従来の実装方法と新しいアプローチを、実際のコード例を交えながら詳しく比較しています。

---

2. React Server Components

この章では、React Server Componentsの概念とその活用方法について解説しました。

• サーバーコンポーネントとは？
  • サーバー側でレンダリングを行い、クライアントの負荷を軽減する仕組みについて詳述しました。
• クライアントコンポーネントとの違い
  • 両者の役割分担やデータ取得方法の違いを、実例をもとに明確に説明しました。

---

3. <form>アクションと新フックの活用

この章では、フォーム送信処理の簡素化と状態管理のための新しいアプローチについて触れました。

• <form>アクションの新機能
  • action属性に関数を指定する新たな手法により、フォームの送信処理が非常にシンプルになりました。
• 新フックの導入
  • 状態管理の面で、より直感的かつ効率的なコード記述が可能になった点を強調しています。

---

4. useOptimistic

この章では、ユーザー体験を向上させるための新フック、useOptimisticについて詳しく解説しました。

• 楽観的UI更新
  • 非同期処理中でもユーザーに即座にフィードバックを返すため、期待される結果を先にUIに反映する手法を紹介しました。
• 具体的なコード例
  • どのようにuseOptimisticを実装すれば、ユーザー体験が向上するかを、実例とともに分かりやすく説明しています。

---

5. refの扱いが変わったんですよ

React 19では、refの取り扱いに関する仕様が大きく変わりました。

• 自動的なrefの受け渡し
  • 関数コンポーネントがprops経由で自動的にrefを受け取れるようになったことで、コードの可読性が大幅に向上しました。
• メリットと実装の簡便さ
  • 複雑なref管理の必要がなくなり、より直感的にコンポーネント設計ができるようになった点を強調しています。

---

6. use API!!

この章では、React 19で新たに追加されたuse APIについて掘り下げました。

• 非同期処理の簡素化
  • 従来の記述方法と比較して、非同期処理がより直感的に記述できるようになった点を解説しました。
• コンテキスト取得の改善
  • コンテキストの管理方法がシンプルになり、コード全体の読みやすさが向上するメリットを説明しています。

---

7. 破壊的変更たち

最後の章では、React 19における破壊的変更についてまとめました。

• 主な変更点の紹介
  • 例えば、propTypesやdefaultPropsの削除など、従来の実装方法と大きく異なる点を挙げています。
• 既存コードへの影響と対策
  • 破壊的変更が既存のプロジェクトに与える影響や、その対応策について具体的な例をもとに解説しました。

---

まとめ

僕が執筆した「コードで比較！ React19」では、React 19の新機能とそれに伴う変更点を、実際のコード例を通じて丁寧に解説しました。
詳しい内容については、是非Booksを読んでくださいね！

---