🧐

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

2022/04/06に公開約4,500字

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

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

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

https://reactjs.org/blog/2022/03/29/react-v18.html
  • 正式版リリース時(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

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

https://ja.reactjs.org/docs/concurrent-mode-intro.html
https://ja.reactjs.org/docs/concurrent-mode-suspense.html
https://ja.reactjs.org/docs/concurrent-mode-patterns.html
https://ja.reactjs.org/docs/concurrent-mode-adoption.html
https://ja.reactjs.org/docs/concurrent-mode-reference.html
  • React 18 のリリースまでに、このページはより安定したドキュメントに置き換わる予定です。、つまりドキュメントがまだ整っていないとのことなので、興味がある方のみ読まれると良いと思います。私は全部は読めていません…

二次情報(その他の記事)

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

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

https://zenn.dev/uhyo/books/react-concurrent-handson
  • 2021/12/28のBook(無料)
  • Suspenseに関する内容
  • Bookなのでかなり詳細な内容。ハンズオン形式でSuspenseの仕組みや仕様を読み解いていく。

https://zenn.dev/uhyo/books/react-concurrent-handson-2
  • 2022/01/13のBook(無料)
  • Transitionに関する内容
  • Transitionの影響範囲が漏れ出る場合についてなど
  • 表の世界と裏の世界を垣間見れる

https://uit-inside.linecorp.com/episode/103
  • 2021/11/05公開
  • ポッドキャストで聞ける(40分程度)

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

https://dev.to/kathryngrayson/everything-you-need-to-know-about-the-react-18-rc-3kc6
  • 2022/03/11の記事
  • 英語
  • Concurrent Rendering, Suspense, Automatic Batching, New APIsなどについて
  • 概略がつかめる

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

https://zenn.dev/engineer_titan/articles/19dc7a8359cf69
  • 2022/04/02の記事
  • useTransitionにフォーカスした記事

https://numb86-tech.hatenablog.com/entry/2022/01/02/225402
  • 2022/01/02の記事
  • Transitionに関する内容メイン
  • Next.js上で試されている

注意喚起

https://qiita.com/uhyo/items/6a3b14950c1ef6974024
  • 2022/01/19の記事
  • useRefでのステート管理はやめてuseState or useReducerにしよう!

ちょっとおまけ的

https://zenn.dev/so_nishimura/articles/c4df97cd1937c2
  • 2021/12/12の記事
  • そもそも対策は不要だったけど、警告文がでなくなったよとのこと

動画系

https://www.youtube.com/watch?v=FZ0cG47msEk
  • 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に関する公演がチャンネルに他にも上がっています。

https://www.youtube.com/channel/UC1hOCRBN2mnXgN5reSoO3pQ/videos

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

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

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

https://www.youtube.com/watch?v=pj5N-Khihgc
  • 2021/12/09投稿の動画
  • Server Renderingの紹介、Suspenseに関する説明
  • クリックしたらそこがインタラクティブになるのが優先されるのがすごい

https://www.youtube.com/watch?v=N0DhCV_-Qbg
  • 正式版リリース時(2022/03/30)の動画
  • 英語、英語字幕あり
  • 18のインストールからRoot APIへの置き換えなどの説明
  • Concurrency, useTransition・startTransition・useDeferredValueについての簡単な説明, State Update Batching, Improved Suspenseについての説明
  • サンプルコードの提示あり

https://www.youtube.com/watch?v=lDukIAymutM
  • 正式版リリース時(2022/03/30)の動画
  • 英語、英語字幕あり
  • ひとつ上の動画と同じ人
  • タイトルどおり、useTransitionとuseDeferredValueについて
  • がっつりコードとデモが見れる

https://www.youtube.com/watch?v=BN4pVo7ectA
  • 2021/06/20投稿の動画
  • 英語、字幕なし(でも聞き取りやすい)
  • Root API, Automatic Batching, startTransition, Suspense and SSRについての説明
  • サンプルコードの提示あり

https://www.youtube.com/watch?v=bpVRWrrfM1M
  • 2021/06/10投稿の動画
  • 英語、日本語字幕あり
  • Automatic Batching, Transitions, Suspens and SSRについての説明

まとめ

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

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

Discussion

ログインするとコメントできます