expo-react-native-performance

Expo React Native のパフォーマンスに関するベストプラクティス

Expo React Native アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 42 個のルールを収録し、自動リファクタリングとコード生成を支援するため、影響度の高い順に優先順位を付けています。

適用する場面

次の場面で、これらのガイドラインを参照してください。

• 新しい React Native コンポーネントや画面を作成するとき
• FlatList または FlashList を使ったリストを実装するとき
• アニメーションやトランジションを追加するとき
• 画像やアセットの読み込みを最適化するとき
• パフォーマンス上の問題がないかコードをレビューするとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	アプリの起動とバンドルサイズ	CRITICAL	startup-
2	リストの仮想化	CRITICAL	list-
3	再レンダリングの最適化	HIGH	rerender-
4	アニメーションのパフォーマンス	HIGH	anim-
5	画像とアセットの読み込み	MEDIUM-HIGH	asset-
6	メモリ管理	MEDIUM	mem-
7	非同期処理とデータ取得	MEDIUM	async-
8	プラットフォームの最適化	LOW-MEDIUM	platform-

クイックリファレンス

1. アプリの起動とバンドルサイズ（CRITICAL）

• startup-enable-hermes - Hermes JavaScript エンジンを有効にする
• startup-remove-console-logs - 本番環境でコンソールログを削除する
• startup-splash-screen-control - スプラッシュ画面の表示を制御する
• startup-preload-assets - スプラッシュ画面の表示中に重要なアセットを事前読み込みする
• startup-async-routes - コード分割に非同期ルートを使用する
• startup-cherry-pick-imports - バレルファイルではなく直接インポートを使用する

2. リストの仮想化（CRITICAL）

• list-use-flashlist - FlatList の代わりに FlashList を使用する
• list-estimated-item-size - 正確な estimatedItemSize を指定する
• list-get-item-type - 複数の種類が混在するリストでは getItemType を使用する
• list-stable-render-item - useCallback で renderItem を安定させる
• list-get-item-layout - 高さが固定されている場合は getItemLayout を指定する
• list-memoize-items - リスト項目のコンポーネントをメモ化する

3. 再レンダリングの最適化（HIGH）

• rerender-use-memo-expensive - コストの高い計算をメモ化する
• rerender-use-callback-handlers - useCallback でコールバックを安定させる
• rerender-functional-setstate - 関数形式の setState 更新を使用する
• rerender-lazy-state-init - 遅延状態初期化を使用する
• rerender-split-context - 更新頻度に応じてコンテキストを分割する
• rerender-derive-state - 状態を同期するのではなく導出する

4. アニメーションのパフォーマンス（HIGH）

• anim-use-native-driver - アニメーションでネイティブドライバーを有効にする
• anim-use-reanimated - 複雑なアニメーションには Reanimated を使用する
• anim-layout-animation - シンプルなトランジションには LayoutAnimation を使用する
• anim-transform-not-dimensions - 寸法ではなく transform をアニメーションさせる
• anim-interaction-manager - アニメーション中は負荷の高い処理を後回しにする

5. 画像とアセットの読み込み（中〜高）

• asset-use-expo-image - 画像の読み込みに expo-image を使用する
• asset-prefetch-images - 表示前に画像をプリフェッチする
• asset-optimize-image-size - 適切なサイズの画像をリクエストする
• asset-use-webp-format - 画像に WebP 形式を使用する
• asset-recycling-key - FlashList の画像で recyclingKey を使用する

6. メモリ管理（中）

• mem-cleanup-subscriptions - useEffect 内のサブスクリプションをクリーンアップする
• mem-clear-timers - アンマウント時にタイマーをクリアする
• mem-abort-fetch - アンマウント時に fetch リクエストを中断する
• mem-avoid-inline-objects - props 内でインラインオブジェクトを避ける
• mem-limit-list-data - メモリ内のリストデータを制限する

7. 非同期処理とデータ取得（中）

• async-parallel-fetching - 独立したデータを並列で取得する
• async-defer-await - 値が必要になるまで await を遅らせる
• async-batch-api-calls - 関連する API 呼び出しをまとめる
• async-cache-responses - API のレスポンスをローカルにキャッシュする
• async-refetch-on-focus - 画面にフォーカスしたときにデータを再取得する

8. プラットフォームの最適化（低〜中）

• platform-android-overdraw - Android のオーバードローを減らす
• platform-ios-text-rendering - iOS のテキスト描画を最適化する
• platform-android-proguard - Android リリースで ProGuard を有効にする
• platform-conditional-render - プラットフォーム固有の最適化

使用方法

詳しい説明とコード例については、個々のリファレンスファイルをお読みください。

• セクションの定義 - カテゴリーの構成と影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

コンパイル済みドキュメント全文

すべてのルールを展開した完全なガイドについては、AGENTS.md をご覧ください。

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールを含むコンパイル済みガイド
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報