Skip to content negi.log()

ReactのConcurrent Modeを触った所感

ざっくりとしたSuspenseの使い方

Suspenseを使うと非同期処理でデータ取得の待機を意識せずにコンポーネントを書くことができる。

const Test:React.FC = () => (
	<Suspense fallback={<Loading />}>
		<Profile />
	</Suspense>
)

上のコードではProfileコンポーネント内でデータを取得させる。 Profileがpromiseをthrowしているときは<Loading />がレンダリングされ、そうではない場合に<Profile />がレンダリングされる。

気になる点

  • コンポーネントがpromiseをthrowしているところ
    • ぱっとコーディングできないのは慣れていないからだろうか
      • おそらくうまくラップしたライブラリが出て、みんなそれを使うことになりそう
  • APIからデータを取得するときはなるべくrootに近いレイヤーのコンポーネントで行っていたが、その戦略は取れなくなりそう
    • 役割ごとにコンポーネントを分けて、APIからデータを取得するのがよい？
    • コンポーネントの設計に大きな影響がでそう

参考にしたもの