デバッグとトラブルシューティング
このガイドは、React Compiler を使用する際の問題を特定し修正するのに役立ちます。コンパイルの問題をデバッグし、一般的な問題を解決する方法を学びます。
学習内容
- コンパイラエラーとランタイムの問題の違い
- コンパイルを妨げる一般的なパターン
- ステップバイステップのデバッグワークフロー
コンパイラの動作を理解する
React Compiler は、React のルールに従うコードを処理するように設計されています。これらのルールを破る可能性のあるコードに遭遇した場合、アプリの動作を変更するリスクを取るよりも、安全のために最適化をスキップします。
コンパイラエラーとランタイムの問題
コンパイラエラーはビルド時に発生し、コードのコンパイルを妨げます。コンパイラは問題のあるコードで失敗するよりもスキップするように設計されているため、これらは稀です。
ランタイムの問題は、コンパイルされたコードが期待通りに動作しない場合に発生します。React Compiler で問題が発生した場合、ほとんどの場合はランタイムの問題です。これは通常、コードが React のルールをコンパイラが検出できない微妙な方法で違反しており、コンパイラがスキップすべきコンポーネントを誤ってコンパイルしたときに起こります。
ランタイムの問題をデバッグする際は、ESLint ルールで検出されなかった影響を受けるコンポーネント内の React のルール違反を見つけることに注力してください。コンパイラはこれらのルールに従うコードに依存しており、コンパイラが検出できない方法でルールが破られると、ランタイムの問題が発生します。
一般的な問題を引き起こすパターン
React Compiler がアプリを壊す主な方法の一つは、コードが正しさのためにメモ化に依存して書かれている場合です。これは、アプリが特定の値がメモ化されていることに依存して正しく動作することを意味します。コンパイラは手動のアプローチとは異なる方法でメモ化を行う可能性があるため、これによりエフェクトの過剰な発火、無限ループ、更新の欠落などの予期しない動作が発生することがあります。
これが発生する一般的なシナリオ:
- 参照の等価性に依存するエフェクト- エフェクトがオブジェクトや配列がレンダー間で同じ参照を維持することに依存している場合
- 安定した参照を必要とする依存配列- 不安定な依存関係によりエフェクトが頻繁に発火したり無限ループが発生したりする場合
- 参照チェックに基づく条件付きロジック- コードがキャッシュや最適化のために参照の等価性チェックを使用している場合
デバッグワークフロー
問題が発生した場合は、以下の手順に従ってください:
コンパイラのビルドエラー
予期せずビルドを壊すコンパイラエラーに遭遇した場合、これはおそらくコンパイラのバグです。以下の情報を添えてfacebook/reactリポジトリに報告してください:
- エラーメッセージ
- エラーの原因となったコード
- 使用している React とコンパイラのバージョン
ランタイムの問題
ランタイムの動作に関する問題については:
1. 一時的にコンパイルを無効にする
問題がコンパイラに関連しているかどうかを切り分けるために"use no memo"を使用します:
問題が解消した場合、それは React のルール違反に関連している可能性が高いです。
問題のあるコンポーネントから手動のメモ化（useMemo、useCallback、memo）を削除して、メモ化なしでアプリが正しく動作することを確認することもできます。すべてのメモ化を削除してもバグが発生する場合は、修正が必要な React のルール違反があります。
2. 問題をステップバイステップで修正する
- 根本原因を特定する（多くの場合、正しさのためのメモ化）
- 各修正後にテストする
- 修正後は
"use no memo"を削除する - コンポーネントが React DevTools で ✨ バッジを表示することを確認する
コンパイラのバグを報告する
コンパイラのバグを見つけたと思われる場合:
- Reactのルール違反でないことを確認する- ESLintでチェックする
- 最小限の再現手順を作成する- 問題を小さな例に切り分ける
- コンパイラなしでテストする- 問題がコンパイル時のみ発生することを確認する
- GitHubにIssueを報告する：
- Reactとコンパイラのバージョン
- 最小限の再現コード
- 期待される動作と実際の動作
- エラーメッセージ（あれば）