説明してください React フック

React Hook は、クラスを作成せずに状態やその他の React 機能を使用できるようにする関数です。 React 16.8 で導入されたこれらにより、機能コンポーネントが状態管理、ライフサイクル イベント、副作用などのロジックを処理できるようになります。

カスタムフックの必要性とは何ですか?

カスタム React フックを使用すると、複数のコンポーネント間でロジックを抽出して再利用できます。これらは、ステートフル ロジックを関数にカプセル化することで、コンポーネントをクリーンな状態に保ち、重複を減らすのに役立ちます。カスタム フックは、組み込みフックと同じルールに従います (たとえば、useState、useEffect などの他のフックを使用できます)。

コードを見せてください:

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

カスタムフックのルール

トップレベルでのみフックを呼び出します:ループ、条件、またはネストされた関数内でフックを呼び出さないでください。

React 関数からのみフックを呼び出します: フックは機能コンポーネントまたは他のカスタム フックで使用する必要があります。