はじめに
2021/12/9に開催されたReact Conf 2021の感想記事です！
アーカイブは↓こちらから！
動画内のまとめ記事ではないので、興味があった箇所を軽く紹介しつつ感想を書いてるだけの記事です。
なので、詳しく詳細をみたい！という方は、アーカイブへ!
各項目ごとにどこについて話しているか分かり易いように、
再生箇所を指定したリンク（何ていうんだろう？）を貼っておきますので、気になったら飛んでみてください！
本題 - React Conf 2021
あいさつ
最初の挨拶
Framerで作ったデザインをJSXでエクスポートでき、それをReactでそのまま使える。
そんなツールが出てきている！
すごいけど、設計原則に根差しているから驚くことじゃない。
とのこと。
アンドリューさんは驚いていませんでしたが、
Framerでアニメーションを作る時にドキュメントを漁っていた時、
たまたま迷い込んだDevelop（だった気がするその時から）で少し体験してめっちゃ驚きました。
そんな機能あったなーと思って久々に見に行ったら、さらにパワーアップ....!
Framerおまけ
import Card from "https://framer.com/**********"
こんな感じでComponent読み込めるらしい！！！、すごいですね!
さらに、スクロールしていったら
Firebaseからデータ持ってくるとか、顔追跡とかとか!!!
え、UI作れるだけでもすごいのに！？
パワーアップ!の領域を遥かに凌駕してました....!!!!
Suspense
おそらく、待ってた人も多いであろう機能！
個人的にどうにかできないかなと試行錯誤している部分だったので、あがりました！
Suspenseの動き
RelayやApollo ClientのHooks、SWRなどを使用している方はよくわかると思うのですが、
データを取得しているコンポーネント、下記のようになっていると思います。
（動画の内容そのまま）
function Main() {
return <List pageId={pageId} />
}
function List({ pageId }) {
const [items, isLoading] = useData(pageId);
if (isLoading) {
return <Spinner />;
}
return items[pageId].map(item =>
<li>{item}</li>
);
}
よく見る！！！って感じのコンポーネントです。
このコンポーネントでは、
- データの取得
- Spinnerを返す
の２つを行なっていますが、そもそもそれってまとめてる必要ないよね？
それ、Suspense使えば解決です（ドーン）
function Main() {
return (
<Suspense fallback={<Spinner />}>
<List pageId={pageId} />
</Suspense>
);
}
function List({ pageId }) {
const items = useData(pageId);
return items[pageId].map(item =>
<li>{item}</li>
);
}
Spinnerが親コンポーネントへ移動し、Listがスッキリ！
めっちゃみやすい
求めてたのは、こうゆうの！！
さらに、下記の画像のように
コンポーネント内にtitleとimageのコンポーネントがあり、各コンポーネント内でfetchしてる場合
function Main() {
return (
<Suspense fallback={<Spinner />}>
<Title pageId={pageId} />
<Image pageId={pageId} />
</Suspense>
);
}
これでもいけます！（最高）
titleとimageの両方のfetchを待機し、完了すると表示。
function Main() {
return (
<Suspense fallback={<Spinner />}>
<Title pageId={pageId} />
<Suspense fallback={<Spinner2 />}>
<Image pageId={pageId} />
</Suspense>
</Suspense>
);
}
titleもimageも読み込み中ならSpinnerを、画像だけならSpinner2を表示するということも可能みたいです。
読み込み中の状態を切り離すことができるのは、とても嬉しいですね！
React18 と React18への移行について
嬉しいことに、React18への移行はそこまで大変ではないようです。
というよりも、大変ではありませんでした。
下記のアドベントカレンダーに参加していたので、手元にいい感じのNext環境があるのでReact18対応をしてみました。
（本当は、自分の番で対応できたらよかったのですが....😭 ）
毎日誰かのプルリクを脳死でマージするアドベントカレンダー（Next.js） Advent Calendar 2021
Next.jsでReact18を体験するのは とても簡単でした。
↓下記Next.jsの公式ドキュメントに書いてありました。
npm install next@latest react@rc react-dom@rc
を実行するだけ。
それだけで、環境は出来上がりました。
React conf内でもアピールされていた「大体のコンポーネントで変更をせずに動作することを確認している」というのは本当でした！
ちいさいプロジェクトですがたくさんの方が参加していることもあり、
いろいろなコンポーネントや、particles-bgなども入っていましたが特に問題なく動作していました。
（今回は問題なかったのですが、一部修正が必要なものもあるみたいです。）
手っ取り早く試せるSuspenseをやってみた図
１番目: １秒後に表示
<Suspense fallback="loading...">
<Test /> //１秒後
</Suspense>
2番目: 3秒後に表示
<Suspense fallback="loading...">
<Test2 /> //3秒後
</Suspense>
3番目: Suspenseでどっちも囲む
<Suspense fallback="loading...">
<Test /> //１秒後
<Test2 /> //3秒後
</Suspense>
4番目: Suspenseの入れ子
<Suspense fallback="loading...">
<Test /> //１秒後
<Suspense fallback="loading2...">
<Test2 /> //3秒後
</Suspense>
</Suspense>
（うまくgif作れなくて小さくなっちゃいました...見えづらくてすみません）
React18では、Suspense以外にも下記の機能も同時リリース！
- useTransition
- useDeferredValue
- Streaming SSR with Suspense
ReactNative
ReactNativeではまだReact18の同時レンダリングをサポートしていないが、
非同期で行っていた処理を同期にすることで問題点であった並行性をサポートできるようになったようです。
まだ調整が必要なので、来年新しいアーキテクチャと共にリリースされる予定。
ReactNativeはまだ時間がかかりそうですが、来年のリリースが待ち遠しいです！
まとめ
やっぱり、今回はSuspenseが注目でした。
使ってみた感じも簡単でよかったです。
React18へのアップデートに関しても、Next.jsを使っていても問題なく行えるのもとても嬉しい！！（アップデートで苦しまない！）
あとは、最初に出てきたRelay。
今回初めて知り、興味があるので触ってみたいと思います！
React conf 2021とても面白い内容でめちゃめちゃ満足でした！
React18の正式リリースがとても待ち遠しいですね！
（動画後半でReactNative for windowsの話が出ていたのですが、去年あまり上手く動作せず挫折しているので再挑戦してみたいな...!!!）
Discussion