本書はReact 18で導入されたConcurrent featuresに焦点を当てた本となっています。
Concurrent featuresとは「画面上でUIを表示させつつ、裏でレンダリングの準備をする」といった並行処理を実現可能にしたReactの新しいエコシステムで、React 18で導入された新機能のうち最も重要なものの1つです。

本書ではConcurrent featuresの概念や、Concurrent featuresと関係性の深いSuspenseやTransitionsの理解を目指します。
また、Transitionsを実現するための新しいカスタムフックuseTransitionとuseDeferredValueの使い方について学習をします。

Concurrent featuresの理解を深めるため、本書には適宜サンプルコードを掲載しています。
サンプルコードの実装は、GitHub上に用意した専用のリポジトリをベースに進めていきます。
確認項目ごとにブランチを用意しているため、必要なコードをすぐに準備できるようになっています。
なお、完成形のコードも公開しているため、手元で実装をせずに動作確認を行うこともできます。
本書では「React 18 + Vite + TypeScript」で構成されたリポジトリと「Next.js 13 + TypeScript」で構成されたリポジトリの2種類を利用します。バージョンについては、Reactは18.2.0、Next.jsは13.4.9となっています。

サンプルアプリケーションで理解するReact 18 Concurrent features入門

はじめに

サンプルアプリケーションの下準備をしよう

Concurrent featuresについて理解しよう

Suspenseについて理解しよう

Suspenseによるコード分割を理解しよう

Suspenseと非同期処理を組み合わせてみよう

Suspenseの仕様について理解を深めよう

Streaming Server Renderingについて理解しよう

Transitionsについて理解しよう

useTransitionについて理解しよう

useDeferredValueについて理解しよう

まとめ

nextjs

react

typescript

c-fi