Reactのルール
さまざまなプログラミング言語が概念を表現する独自の方法を持っているように、Reactは理解しやすく、高品質のアプリケーションを生み出す方法でパターンを表現するための独自のイディオム、つまりルールを持っています。
このセクションでは、慣用的なReactコードを記述するために従う必要があるルールについて説明します。慣用的なReactコードを記述すると、整理され、安全で、構成可能なアプリケーションを記述するのに役立ちます。これらの特性により、アプリは変更に対してより耐性があり、他の開発者、ライブラリ、ツールと連携しやすくなります。
これらのルールは、Reactのルールとして知られています。これらは単なるガイドラインではなく、ルールです。つまり、ルールが破られると、アプリにバグが発生する可能性があります。また、コードは慣用的でなくなり、理解しにくく、推論しにくくなります。
ReactのESLintプラグインと併せて、StrictModeを使用することを強くお勧めします。Reactのルールに従うことで、これらのバグを見つけて対処し、アプリケーションを保守しやすくすることができます。
コンポーネントとHooksは純粋でなければならない
コンポーネントとHooksの純粋性は、アプリを予測可能でデバッグしやすくし、Reactがコードを自動的に最適化できるようにするReactの重要なルールです。
- コンポーネントは冪等でなければならない – Reactコンポーネントは、入力（props、state、context）に対して常に同じ出力を返すことを前提としています。
- 副作用はレンダーの外で実行する必要がある – Reactは可能な限り最高のユーザーエクスペリエンスを作成するためにコンポーネントを複数回レンダーできるため、副作用はレンダーで実行しないでください。
- PropsとStateは不変である – コンポーネントのpropsとstateは、単一のレンダーに対する不変のスナップショットです。これらを直接変更しないでください。
- Hooksへの戻り値と引数は不変である – 値がHooksに渡されたら、変更しないでください。JSXのpropsと同様に、値はHooksに渡されると不変になります。
- JSXに渡された後、値は不変である – JSXで使用された後、値を変更しないでください。変更はJSXが作成される前に行ってください。
ReactはコンポーネントとHooksを呼び出す
Reactは、ユーザーエクスペリエンスを最適化するために必要なときに、コンポーネントとhooksをレンダリングします。 これは宣言型です。コンポーネントのロジックで何をレンダリングするかをReactに指示すると、Reactはユーザーにそれを表示する最適な方法を決定します。
- コンポーネント関数を直接呼び出さないでください – コンポーネントはJSXでのみ使用する必要があります。通常の関数として呼び出さないでください。
- Hooksを通常の値として渡さないでください – Hooksはコンポーネント内でのみ呼び出す必要があります。通常の値として渡さないでください。
フックのルール
フックは JavaScript 関数を使用して定義されますが、呼び出し場所が制限された特別なタイプの再利用可能な UI ロジックを表します。フックを使用する場合は、フックのルールに従う必要があります。
- フックはトップレベルでのみ呼び出す – ループ、条件、またはネストされた関数内でフックを呼び出さないでください。代わりに、常にReact関数のトップレベルで、早期リターンの前にフックを使用してください。
- フックは React 関数からのみ呼び出す – 通常の JavaScript 関数からフックを呼び出さないでください。