Reactのカスタムフック (Custom Hooks) の実装例

「カスタムフック (Custom Hook)」とは、Reactにおける一つの概念で、状態管理(useState)や副作用(useEffect)のロジックを関数化し、これを複数のコンポーネントで再利用するために使われる。

Reactのカスタムフックの実装例: useCounter

// useCounter.ts
import { useState } from 'react';

const useCounter = (initialValue: number = 0) => {
  const [count, setCount] = useState(initialValue);

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

  return { count, increment, decrement, reset };
}

export default useCounter;

カスタムフックの使用例: CounterComponent

// CounterComponent.tsx
import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default CounterComponent;