デバッグとトラブルシューティング

コンパイラの動作を理解する

React Compiler は React のルール に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。

コンパイラエラーとランタイムエラー

コンパイラエラー はビルド時に発生し、コードのコンパイルを妨げます。コンパイラは問題のあるコードをスキップするように設計されているため、エラーが発生することは稀です。

ランタイムエラー は、コンパイルされたコードが期待とは異なる動作をする場合に発生します。React Compiler で問題に遭遇した場合、ほとんどの場合はランタイムエラーです。これは通常、コンパイラが検出できない微妙な方法で React のルールをコードが違反し、コンパイラがスキップすべきコンポーネントを誤ってコンパイルした場合に発生します。

ランタイムエラーをデバッグする際は、影響を受けるコンポーネント内の ESLint ルールで検出できなかった React のルール違反を見つけることに集中してください。コンパイラはコードがこれらのルールに従うことを前提としており、検出できない方法でルールに違反した場合にランタイムエラーが発生します。

一般的な破綻パターン

React Compiler がアプリケーションを失敗させる代表的な方法の 1 つは、挙動の正しさをメモ化に依存して記述することです。これは、アプリケーションが正常に動作するために、特定の値がメモ化されることに依存している状態です。コンパイラは、手動のアプローチとは異なる方法でメモ化を行う可能性があるため、副作用の過剰発火や無限ループ、更新の欠落といった予期せぬ動作を引き起こす可能性があります。

これが発生する一般的なシナリオ：

• 参照の同一性に依存する副作用 - 副作用が、複数回のレンダーでもオブジェクトや配列が同じ参照を保つことを必要とする場合
• 安定した参照を必要とする依存配列 - 依存が不安定だと、エフェクトが過剰に発火したり無限ループを引き起こす場合
• 参照チェックに基づく条件ロジック - キャッシュや最適化のために参照同一性のチェックを行っている場合

デバッグワークフロー

問題に遭遇した場合は、以下の手順に従ってください：

コンパイラビルドエラー

コンパイラエラーにより予期せずビルドが失敗した場合、これはコンパイラのバグである可能性が高いです。以下を含めて facebook/react リポジトリに報告してください：

• エラーメッセージ
• エラーを引き起こしたコード
• React とコンパイラのバージョン

ランタイムエラー

ランタイム動作の問題については：

1. コンパイルを一時的に無効化

問題がコンパイラに関係するかを切り分けるために "use no memo" を使用します：

function ProblematicComponent() {
  "use no memo"; // Skip compilation for this component
  // ... rest of component
}

これにより問題が解決した場合、React のルール違反に関連している可能性が高いです。

問題のあるコンポーネントから手動のメモ化（useMemo、useCallback、memo）を削除し、メモ化なしでアプリケーションが正しく動作することを確認することもできます。すべてのメモ化を削除してもバグが発生する場合は、修正が必要な React のルール違反があります。

2. 段階的な問題の修正

1. 根本原因を特定する（典型例は、挙動の正しさがメモ化に依存した実装）
2. 各修正後にテストする
3. 修正したら "use no memo" を削除する
4. コンポーネントが React DevTools で ✨ バッジを表示することを確認する

コンパイラバグの報告

コンパイラバグを発見したと思われる場合：

1. React のルール違反ではないことを確認する - ESLint でチェック
2. 最小限の再現方法を特定する - 小さな例で問題を切り分ける
3. コンパイラなしでテストする - 問題がコンパイル時のみに発生することを確認
4. issue を提出する：
   • React とコンパイラのバージョン
   • 最小限の再現コード
   • 期待される動作と実際の動作
   • エラーメッセージ

次のステップ

• 問題を防ぐために React のルール を確認
• 段階的な展開戦略については 段階的導入ガイド を確認