lazy/Suspense
Promiseをthrowすることで、子コンポーネントのレンダリングを中断し、Promiseの完了時にレンダリングを再実行する機能
表示されるタイミングは、lazyで指定したコンポーネントのstateが更新されてから描画終了までの間と、throwが投げられて読み込み中の間、fallbackに指定したコンポーネントを表示する
code: sample.js
// lazyとSuspenseは基本的にセットで使われる
function Todo () {
// Suspenseは下のような処理を簡単に構築できるようにしたもの
function getTodo(){
/*データ読み込み処理*/
}
function TodoScreen(props) {
if(todos.length !== 0){
return (
<TodoList todos={todos}>
)
}
throw async () => {
await // fetching dataT
getTodo()
resolve()
})
}
}
-------------------------------
const Todo = lazy(() => import(./Todo)) // importしないとうまくいかなかった
// fallbackに入れた処理が読み込み中にレンダリングされる
function App(){
return (
<Suspense fallback={<Loading/>}>
<Todo/>
</Suspense>
)
}
参考