🧐

React 18について自分がインプットに使った記事・動画をまとめてみた

2022/04/07に公開

React 18が正式にリリースされていますが、自分はまだまだキャッチアップできてない部分もありました。
今回、自分のインプットも兼ねて、React 18に関する記事や動画をチェックしましたので、独断でまとめ、ここでメモと一緒に紹介したいと思います。
ブログ・ドキュメントを読むのもおすすめですが、動画系を追うだけでも結構情報を追えるので、公式のテキスト読むのが辛いという方にはそちらもおすすめです。

*随時更新は取りやめ中です。

まずは公式ブログ・ドキュメントからチェック

正式版リリース時（2022/03/29）の英語ブログ
Concurrent Reactについての概念・説明
並行レンダリングへの移行を既存のコードを壊さずに行う
Relay、Next.js、Hydrogen、RemixなどのフレームワークでのデータフェッチにSuspenseの利用が可能など
Server Componentsはまだ開発中
新機能：Automatic Batching, Transitions, New Suspense Features, New Client and Server Rendering APIs, New Strict Mode
New Hooks: useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect

公式ドキュメント（アーリーアダプター向け）

React 18 のリリースまでに、このページはより安定したドキュメントに置き換わる予定です。、つまりドキュメントがまだ整っていないとのことなので、興味がある方のみ読まれると良いと思います。私は全部は読めていません…

二次情報（その他の記事）

uhyoさんのこちらのツイートから

2021/11/24の記事
主にSuspenseに関する内容
React 18のストリーミングSSRを活用するためには非同期処理をSuspenseを用いて書く必要がある

2021/12/28のBook（無料）
Suspenseに関する内容
Bookなのでかなり詳細な内容。ハンズオン形式でSuspenseの仕組みや仕様を読み解いていく。

2022/01/13のBook（無料）
Transitionに関する内容
Transitionの影響範囲が漏れ出る場合についてなど
表の世界と裏の世界を垣間見れる

2021/11/05公開
ポッドキャストで聞ける（40分程度）

2021/06/15の記事
こちらもuhyoさんによる記事。最新の記事というわけではありませんが、こちらの記事で、React 18の機能の思想や概略をつかむことが出来る。かなりおすすめ記事

2022/03/11の記事
英語
Concurrent Rendering, Suspense, Automatic Batching, New APIsなどについて
概略がつかめる

2021/06/30の記事
デモも織り交ぜながらFiber、Suspsnseなどについて解説
オタク向けとありますが、ものすごく読みやすい

2022/04/02の記事
useTransitionにフォーカスした記事

2022/01/02の記事
Transitionに関する内容メイン
Next.js上で試されている

注意喚起

2022/01/19の記事
useRefでのステート管理はやめてuseState or useReducerにしよう！

ちょっとおまけ的

2021/12/12の記事
そもそも対策は不要だったけど、警告文がでなくなったよとのこと

動画系

2021/12/09公開
公式（React公式ブログからリンクされている動画）
日本語字幕あり
React以降のデザイナーとのコミュニケーションに関する話
"Truly great developer experience does not sacrifice user experience - it enables it"
Suspense - Reading the dataとSpecifying the loading stateの分離、サーバー上でのSuspense、Relay以外のデータフェッチライブラリについて
Concurrent rendering - 段階的な移行、並行モードではなく、並行"機能"がある
Server Components

その他、React 18に関する公演がチャンネルに他にも上がっています。
YouTubeのvideoIDが不正です

日本人のDaishi Katoさんも話されています。上記に上がっている動画は英語・日本語字幕あり。

その中でも下記は一番最初に挙げたReact公式ブログでもリンクが貼ってあります。

2021/12/09投稿の動画
Automatic Batching, Suspense on Server, New APIs(concurrent features, mostly for libraries), React 18へのアップデート方法, concurrentのデモ
最初の道入動画としてすごくよさそう

2021/12/09投稿の動画
Server Renderingの紹介、Suspenseに関する説明
クリックしたらそこがインタラクティブになるのが優先されるのがすごい

正式版リリース時（2022/03/30）の動画
英語、英語字幕あり
18のインストールからRoot APIへの置き換えなどの説明
Concurrency, useTransition・startTransition・useDeferredValueについての簡単な説明, State Update Batching, Improved Suspenseについての説明
サンプルコードの提示あり

正式版リリース時（2022/03/30）の動画
英語、英語字幕あり
ひとつ上の動画と同じ人
タイトルどおり、useTransitionとuseDeferredValueについて
がっつりコードとデモが見れる

2021/06/20投稿の動画
英語、字幕なし（でも聞き取りやすい）
Root API, Automatic Batching, startTransition, Suspense and SSRについての説明
サンプルコードの提示あり

2021/06/10投稿の動画
英語、日本語字幕あり
Automatic Batching, Transitions, Suspens and SSRについての説明

まとめ

React 18 Keynoteだけでも見てほしい
Reactが引き続きUIライブラリを名乗ったり、UXを重視してることがわかって、やっぱりReactが好きで良かったと思った
新しいHooksの記事書きたい
useSyncExternalStore、useInsertionEffect気になるぞ
記事のuhyoさん率の高さ

引き続きキャッチアップしていこうと思います！💪

まずは公式ブログ・ドキュメントからチェック

公式ドキュメント（アーリーアダプター向け）

二次情報（その他の記事）

動画系

まとめ

Discussion