negi.log()

ReactのConcurrent Modeを触った所感

April 13, 2020

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

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

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

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

気になる点

  • コンポーネントがpromiseをthrowしているところ

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

    • 役割ごとにコンポーネントを分けて、APIからデータを取得するのがよい?
    • コンポーネントの設計に大きな影響がでそう

参考にしたもの