2019/10/03 第154回フロントエンドMTG 議事録

React.lazy を触った

Code-Splitting – React

基本の使い方

import React, { lazy, Suspense } from 'react';

const Component = lazy(() => import('./Component'));

const Usage: React.FC = () => (
  <Suspense fallback="Loading...">
    <Component />
  </Suspense>
);

lazy() の引数は Promise<{ default: React.FC }> を返す関数でありさえすればよいので、リトライ処理を自前で追加することができる。

ネタ元：How to retry when React lazy fails - DEV Community 👩‍💻 👨‍💻

const retry = async <P extends {}>(
  importFn: () => Promise<{ default: React.FC<P> }>,
  retryCount = 0,
): Promise<{ default: React.FC<P> }> => {
  try {
    return await importFn();
  } catch (error) {
    if (retryCount < 3) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return retry(importFn, retryCount + 1);
    }
    throw error;
  }
};

const Component = lazy(() => retry(() => import('./Component')));

読み込み失敗を error boundary でハンドリングするかわりに、ここでやってもよさそう。

const Component = lazy(() => retry(() => import('./Component')).catch(error => {
  const ErrorMessage: React.FC = () => {
    ... // Bugsnag 通知とか
    return <span>Failed to load</span>;
  };
  return {
    default: ErrorMessage,
  };
}));