React.lazy - mrsekut-p

React.lazy

lazy loadingする

Suspense for Code Splittingパターンで使用する

ルーティングのとことかで書くと良い ref

code:ts

const OtherComponent = React.lazy(() => import('./OtherComponent'));

React.Suspenseで挟む必要がある

直近の親である必要はない

読み込んでる間はfallbackを表示する

code:tsx

<Suspense fallback={<div>loading...</div>}>

<LazyComponent>

</Suspense>

default export いけるっけ ?? https://ja.reactjs.org/docs/code-splitting.html#named-exports

https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

https://zenn.dev/yuku/articles/2f4b05fce10def