React におけるフックの基本的なルール: フックを適切に使用する方法

React のフックのルール

React フックは、機能コンポーネントで状態やその他の React 機能を使用できるようにする強力な機能です。ただし、フックが適切かつ一貫して機能することを保証するには、フックを使用するときに従う必要がある特定のルールがあります。これらのルールは、React が最適化された予測可能な方法でフックの状態、効果、その他の機能を管理するのに役立ちます。

フックのルールは次のとおりです:

1. トップレベルでのみフックを呼び出します:
   • ループ、条件、またはネストされた関数内でフックを呼び出さないでください。フックは常に React コンポーネントまたはカスタム フックの最上位で呼び出す必要があります。
   • これにより、レンダリングごとにフックが同じ順序で呼び出されることになります。これは、React の状態管理とレンダリング ロジックにとって重要です。

悪い例:

   if (someCondition) {
     useState(0);  // Bad: Hook inside condition
   }

良い例:

   const [count, setCount] = useState(0); // Always called at the top level

1. React 関数からのみフックを呼び出します:
   • 機能コンポーネントまたはカスタム フックからフックを呼び出します。通常の JavaScript 関数、クラス コンポーネント、または React の関数コンポーネント エコシステムの外部からこれらを呼び出さないでください。
   • フックは、通常の関数やクラス メソッドではなく、関数コンポーネントまたはカスタム フックでのみ動作するように設計されています。

悪い例:

   function regularFunction() {
     useState(0);  // Bad: Hook used outside a React component
   }

良い例:

   const MyComponent = () => {
     const [count, setCount] = useState(0); // Good: Inside a functional component
   };

1. カスタムフックには use プレフィックスを使用します:
   • カスタム フックは、React の規則に従い、通常の関数と区別するために use で始める必要があります。
   • これは読みやすさと一貫性の向上に役立ち、React は use プレフィックスを持つ関数を見つけたときにルール違反を内部的にチェックできます。

悪い例:

   function fetchData() {  // Bad: Not prefixed with "use"
     // Custom hook logic
   }

良い例:

   function useFetchData() {  // Good: Prefixed with "use"
     // Custom hook logic
   }

---

これらのルールが重要なのはなぜですか?

• フック呼び出しの順序: フックは呼び出される順序に依存します。 React は、どのフックがどの状態またはエフェクトに対応するかを内部的に追跡するため、条件付きまたはループ内でフックを呼び出すと、レンダリング間でフックの順序が変わる可能性があります。これにより、予期しない動作やバグが発生します。トップレベルでフックを呼び出すことで、React は常に一貫した方法でフックを追跡できます。

• レンダリング全体の一貫性: React は、コンポーネントが再レンダリングされるたびに同じ順序で呼び出されるフックに依存します。異なるレンダリング中にフックが異なる順序で呼び出される場合、React は状態とエフェクトを正しく適用する方法を認識できません。

• フック呼び出しの不一致の回避: React 以外の関数または条件ブロックでフックを呼び出すと、React はどの状態がどのフックに対応するかを認識できないため、不一致やエラーが発生します。

---

ルールに効果的に従う方法

1. すべてのフックをコンポーネントの最上位に配置します: これには、useState、useEffect、useCallback、useMemo、およびその他の React フックが含まれます。これらをループ、条件、またはネストされた関数内に配置しないでください。

例:

   if (someCondition) {
     useState(0);  // Bad: Hook inside condition
   }

1. 再利用可能なロジックのカスタム フックを作成する: 複数のコンポーネントで同じロジックを再利用していることがわかった場合は、カスタム フックを作成できます。一貫性を確保し、通常の関数との混同を避けるために、カスタム フック名は常に use で始まります。

例:

   const [count, setCount] = useState(0); // Always called at the top level

1. すべてのレンダリングで同じ順序でフックを使用します: ループまたは条件文内でフックを使用する場合でも、各レンダリング中にフックが同じ順序で呼び出されることを確認してください。

悪い例:

   function regularFunction() {
     useState(0);  // Bad: Hook used outside a React component
   }

良い例:

   const MyComponent = () => {
     const [count, setCount] = useState(0); // Good: Inside a functional component
   };

1. カスタム フックのルールに従います: カスタム フックは、コンポーネント間で再利用可能なロジックを共有するのに最適です。常に use という接頭辞を付け、React の組み込みフックと同じルールに従うようにしてください。

例:

   function fetchData() {  // Bad: Not prefixed with "use"
     // Custom hook logic
   }

---

避けるべきよくある間違い

• 条件付きフックの呼び出し: 条件またはループ内でフックを呼び出したくなるかもしれませんが、これはフックを常に同じ順序で呼び出す必要があるというルールに違反します。代わりに、常に同じ順序でフックを呼び出すようにコードを再構築することを検討してください。

• React コンポーネントまたはカスタム フックの外部でのフックの使用: React フックは、機能コンポーネントまたはカスタム フックの内部でのみ使用できます。クラスコンポーネントまたは通常の関数内でフックを使用すると、エラーが発生します。

---

結論

フックのルールは、React が一貫性のある予測可能な状態管理システムを維持できるようにする基本原則です。これらのルールに従うことで、React はコンポーネントが適切に動作し、状態が正しく管理され、副作用が期待どおりに実行されることを保証できます。常に覚えておいてください:

• コンポーネントのトップレベルでフックを呼び出します。
• React 関数またはカスタム フックからのみフックを呼び出します。
• カスタムフック名は常に use で始まります。

これらのガイドラインに従うことで、React アプリケーションのパフォーマンスが向上し、バグがないことが保証されます。

---

以上がReact におけるフックの基本的なルール: フックを適切に使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。