React のルール
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。
このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。
以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。
React のルールを守るため、React の ESLint プラグイン と Strict Mode を併用して利用することを強くお勧めします。React のルールに従うことにより、バグを見つけて対処し、アプリケーションを保守可能に保つことができます。
コンポーネントとフックを純粋に保つ
コンポーネントとフックを純粋に保つことは、アプリを予測可能にし、デバッグしやすくし、React がコードを自動的に最適化できるようにするための、React の重要なルールです。
- コンポーネントとフックを冪等にする - React コンポーネントは、入力（props、state、およびコンテクスト）に対して常に同じ出力を返すことが前提となっています。
- 副作用はレンダーの外で実行する - 副作用はレンダー内で実行するべきではありません。React は最適なユーザ体験を実現するために複数回コンポーネントをレンダーすることがあるからです。
- props と state はイミュータブル - コンポーネントの props と state は、単一のレンダー内においては不変のスナップショットです。直接書き換えてはいけません。
- フックの引数と返り値はイミュータブル - 一度フックに値を渡したならそれを書き換えてはいけません。JSX の props と同様、フックに渡された値はイミュータブルになります。
- JSX に渡された後の値はイミュータブル - JSX で使用した後に値を書き換えてはいけません。書き換えのロジックは JSX を作成する前に行います。
コンポーネントやフックを呼び出すのは React
ユーザ体験を最適化するために必要に応じてコンポーネントやフックを呼び出すというのは React 自身の責務です。React は宣言型 (declarative) です。あなたは何 (what) をレンダーしたいのかだけを React に伝え、それをどうやって (how) ユーザにうまく表示するのかについては React が考えます。
- コンポーネント関数を直接呼び出さない – コンポーネントは JSX 内でのみ使用します。通常の関数として呼び出してはいけません。
- フックを通常の値として取り回さない – フックはコンポーネント内で呼び出すだけにします。通常の値のようにコード内で取り回してはいけません。
フックのルール
フックは再利用可能な UI ロジックを表す JavaScript の関数として定義されており、呼び出せる場所に関する制約があります。フックを使用する際には、フックのルールに従う必要があります。
- フックはトップレベルでのみ呼び出す – ループ、条件分岐、ネストされた関数の内部でフックを呼び出してはいけません。代わりに、フックは常に React 関数のトップレベルで、早期 return を行う前に行います。
- フックは React の関数からのみ呼び出す – 通常の JavaScript 関数からフックを呼び出してはいけません。