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

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

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