副作用のある処理を待ってから Component を描画したい

Next13 で MSW を使いたいんだけど、なんかうまく行かないっぽい（というより未対応）
https://github.com/mswjs/msw/issues/1644

issue を見る感じ Server(?) ではうまく動かないっぽいが Client では ServiceWorker を動かしているので、動くだろうと思いやってみた

そこで、副作用のある処理（ここでは MSW の初期化）を待ってから Component を描画したいという状況になった

副作用（非同期）の完了を待ってからComponentの描画なると、Suspence か〜となる
僕は、Suspence を使うとき React.lazy でしか使ったことが無いがなんとかなるじゃろと思い実装してみた

React.lazy のジグネチャは

function lazy<T extends ComponentType<any>>(
        factory: () => Promise<{ default: T }>
    ): LazyExoticComponent<T>;

となっているので、{default: T} を返す非同期関数を食わせたらいいと分かる

今回のやりたいこととしては、「MSWの初期化が完了したことを待ってから子コンポーネントを描画する」というものなので以下のように書ける

const LoadMSW = lazy(async () => {
  const component = {
    default: ({ children }: { children: React.ReactNode }) => {
      return children
    },
  }

  if (process.env.NODE_ENV !== 'development' || typeof window === 'undefined') {
    return component
  }

  const { initMSW } = await import('.')

  await initMSW()

  return component
})

initMSW は setupWorker(...).start() をしている
LoadMSW が返すコンポーネントは children を受け取ってそれを返すだけのもの
MSW を使わないとき（!開発環境 || !ブラウザ）は何もしないで component を返す
MSW を使いたいときは、MSW の初期化を待ってから component を返す
最後にこれを Suspence で囲んで、トップの layout.tsx とかで呼び出してあげたらいい感じに初期化が済んでから描画される

うまく動いたんだけど、React.lazy ってこういう使い方していいんだっけ？という気持ちになった