問題一覧に戻る
中級カスタムフック
問題53: useCounter

カウンター機能を抽出したカスタムフックの実装を学びます。増加、減少、リセットの操作をカプセル化し、任意のコンポーネントで再利用できるようにします。初期値をパラメータとして受け取り、現在値と操作関数をオブジェクトで返すパターンを採用します。このようなカスタムフックにより、カウンター機能を持つ複数のコンポーネントで同じロジックを共有でき、保守性が向上します。実際のアプリケーションでは、ページネーション、数量選択、スコア管理など様々な場面で活用できます。

import React, { useState } from 'react';

{/* カウンターカスタムフック */}
function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  
  {/* カウンター操作メソッド */}
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount();
  
  return { , increment, , reset };
}

function App() {
  {/* useCounterフックを使用 */}
  const { count, increment, decrement, reset } = ();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}

export default App;
···