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

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

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 のルールを確認する
• 段階的な展開戦略については段階的導入ガイドを確認する