Reactガイドを読んでいくその32

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

コード分割

React.lazy

動的インポートを通常のコンポーネントとしてレンダリングすることができる。
qiita.com

Suspense

Suspense内で遅延コンポーネントはレンダーされる。
遅延コンポーネントのローディング待機中にフォールバック用のコンテンツを表示可能。

fallbackプロパティはコンポーネントがロードされるのを待っている間に表示したいあらゆるReact要素を受け取る。

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Error Boundary

他のモジュールがロードに失敗した場合error boundaryを使用することでエラーハンドリングが可能。
error boundaryを使用することで遅延コンポーネントの上位のあらゆる場所で使用が可能で、エラー表示できる。

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

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

ルーティング単位でのコード分割

アプリ内のどこにコード分割を導入するか決定は意外と面倒。
ユーザ体験を妨げず、バンドルを均等に分割するようにしたい。

コード分割に適しているのはルーティング。
ページのロードには多少時間がかかるのはユーザ体験としても違和感が少ないため。
React Routerのようなライブラリを使ったアプリにReact.lazyを使用するような分割をすると良い。

名前付きエクスポート

React.lazyはデフォルトのみ
インポートしたいモジュールがエクスポートを使用している場合、
それをデフォルトとして再度エクスポートする中間モジュールを作成可能。

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

今日はここまで。