1k-performance

OneKey のパフォーマンス最適化

OneKey モノレポ内の React／React Native アプリケーション向けのパフォーマンス最適化パターンとベストプラクティスです。

クイックリファレンス

カテゴリ	主な最適化	使用する場面
並行リクエスト	3～5 件に制限し、executeBatched を使用	複数の API 呼び出し、ネットワーク負荷の高い操作
ブリッジの最適化	ブリッジをまたぐ回数を最小限にし、データをまとめる	React Native ブリッジのオーバーヘッド、iOS／Android
リストのレンダリング	FlashList、windowSize={5}、content-visibility	100 件以上の項目があるリスト
メモ化	memo、useMemo、useCallback	計算負荷の高い処理、再レンダリングの防止
負荷の高い操作	InteractionManager、setTimeout	UI をブロックする操作

重要なパフォーマンスルール

❌ 禁止：並行リクエストが多すぎる

// ❌ BAD - Can freeze UI with 15+ requests
const requests = items.map(item => fetchData(item));
await Promise.all(requests);

✅ 正しい方法：並行数を制限したバッチ実行

async function executeBatched<T>(
  tasks: Array<() => Promise<T>>,
  concurrency = 3,
): Promise<Array<PromiseSettledResult<T>>> {
  const results: Array<PromiseSettledResult<T>> = [];
  for (let i = 0; i < tasks.length; i += concurrency) {
    const batch = tasks.slice(i, i + concurrency);
    const batchResults = await Promise.allSettled(
      batch.map((task) => task()),
    );
    results.push(...batchResults);
  }
  return results;
}

const tasks = items.map(item => () => fetchData(item));
await executeBatched(tasks, 3); // Max 3 concurrent

🚨 組み込みの最適化

すでに最適化済みです — 対応は不要です：

コンポーネント	最適化	詳細
ListView	windowSize={5}	表示される項目数を自動的に制限します
Tabs	contentVisibility: 'hidden'	非アクティブなタブを非表示にします
Dialog	contentVisibility: 'hidden'	閉じている間は非表示にします

詳細ガイド

包括的なパフォーマンス最適化戦略については、performance.md を参照してください。

対象トピック：

• 並行リクエストの制御
• React Native ブリッジの最適化
• 負荷の高い操作のオフロード
• リストのレンダリング（windowSize、FlashList、content-visibility）
• メモ化とコールバック
• 状態更新の最適化
• 画像の最適化
• 非同期操作と競合状態
• 実際の iOS AppHang の事例研究

関連スキル

• /1k-coding-patterns - 一般的なコーディングパターンと規約
• /1k-sentry - Sentry によるエラー分析（パフォーマンスの問題を含む）