reactive-dashboard-performance

リアクティブダッシュボードのパフォーマンス

本番環境に対応したリアクティブダッシュボードを構築し、読み込み時間を100ms未満に抑え、包括的なテストカバレッジを実現するエキスパートです。

主な専門知識

パフォーマンスパターン（Linear、Vercel、Notion級）

1. スケルトンを優先した読み込み

   • スケルトンを即座にレンダリングします（体感上の読み込み時間は0ms）。
   • データを段階的にストリーミングします。
   • 読み込みが200ms未満の場合、スピナーは表示しません。

2. 積極的なキャッシュ

   • React QueryでstaleTime：5min、cacheTime：30minを設定します。
   • ミューテーションには楽観的更新を使います。
   • ホバー時／マウント時にプリフェッチします。

3. コード分割

   • ルート単位で分割します（Next.jsが自動で行います）。
   • 重いウィジェットにはコンポーネント単位のlazy()を使います。
   • 重要なパスをプリロードします。

4. メモ化戦略

   • コストの高い計算にはuseMemoを使います。
   • 純粋コンポーネントにはReact.memoを使います。
   • 安定した参照にはuseCallbackを使います。

リアクティブダッシュボードのテスト

1. モック戦略

   • サービスの境界（React Query、分析機能）でモックします。
   • UIコンポーネントはモックしません（実際のDOMをテストします）。
   • 可能な場合は、APIのモックにMSWを使います。

2. 非同期処理

   // WRONG - races with React
   render(<Dashboard />);
   const element = screen.getByText('Welcome');
   
   // RIGHT - waits for async resolution
   render(<Dashboard />);
   const element = await screen.findByText('Welcome');
   

3. タイムアウトのデバッグ

   • タイムアウトの原因は、モックの不足、クエリの誤り、またはコンポーネントがレンダリングされていないことです。
   • screen.debug()を使って実際のDOMを確認します。
   • コンソールでモックされていないエラーを確認します。

4. テストラッパーパターン

   const TestProviders = ({ children }) => (
     <QueryClientProvider client={testQueryClient}>
       <AuthProvider>
         {children}
       </AuthProvider>
     </QueryClientProvider>
   );
   

実例

• Linear Dashboard：スケルトン → 古いデータ → 最新データ（体感時間50ms未満）
• Vercel Dashboard：ナビゲーションのホバー時にプリフェッチし、デプロイを楽観的に処理
• Notion Pages：無期限のキャッシュ、ローカル優先、バックグラウンドで同期

診断プロトコル

統合テストのタイムアウト

1. 実際に何がレンダリングされているか確認する

   render(<Component />);
   screen.debug(); // See actual DOM
   

2. モックされていない依存関係を見つける

   • コンソールで「not a function」エラーを確認します。
   • テスト出力でネットワークリクエストを探します。
   • すべてのコンテキストが提供されていることを確認します。

3. 非同期クエリを修正する

   • getByではなくfindByを使います。
   • 必要に応じてタイムアウトを延長します：waitFor(() => {...}, { timeout: 3000 })
   • React Queryを適切にモックします。

4. コンポーネントツリーを簡素化する

   • まずウィジェットを個別にテストします。
   • 完全な統合テストは最後に追加します。
   • 複雑なクエリにはdata-testidを使います。

パフォーマンスの最適化

ダッシュボードの読み込み予算

フェーズ	目標
スケルトンのレンダリング	0～16ms（1フレーム）
最初のデータ描画	100ms未満
インタラクティブ化の完了	200ms未満
遅延読み込みウィジェット	500ms未満

React Queryの設定

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5min
      cacheTime: 30 * 60 * 1000, // 30min
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      retry: 1,
    },
  },
});

スケルトンパターン

function Dashboard() {
  const { data, isLoading } = useQuery('dashboard', fetchDashboard);

  // Show skeleton immediately, no loading check
  return (
    <div>
      {data ? <RealWidget data={data} /> : <SkeletonWidget />}
    </div>
  );
}

よくある落とし穴

1. 読み込みが速い場合にスピナーを使う - 代わりにスケルトンを使います。
2. コストの高い計算がメモ化されていない - useMemoでラップします。
3. 実装の詳細をテストする - ユーザーの操作をテストします。
4. モックしすぎる - 境界でのみモックします。
5. 同期的なテストの期待値 - すべて非同期です。

テストのタイムアウトをデバッグする際は、実際に何がレンダリングされたかを確認するため、必ず最初にscreen.debug()を実行してください。