開発Tips（2025-11-01）

React

React Hooksを活用して、コンポーネントの状態管理と副作用処理をより簡潔に、再利用しやすい形で行うためのテクニックです。useReducerフックをカスタムフックと組み合わせることで、複雑な状態ロジックをカプセル化し、コンポーネントをより宣言的に記述できます。

状態管理をReducerでカプセル化するカスタムフック

useReducerは複雑な状態ロジックを管理するのに適していますが、コンポーネントが肥大化する可能性があります。カスタムフックとして状態ロジックを抽出することで、再利用性とテスト容易性を向上させることができます。

説明: useReducerをラップしたカスタムフックを作成し、状態管理ロジックをコンポーネントから分離します。これにより、コンポーネントは状態の変更をディスパッチすることに集中し、ロジック自体はカスタムフック内に隠蔽されます。

コード例:

import { useReducer, useCallback } from 'react';

// 初期状態とreducerを定義
const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// カスタムフック
const useCounter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // useCallbackでメモ化
  const increment = useCallback(() => dispatch({ type: 'increment' }), [dispatch]);
  const decrement = useCallback(() => dispatch({ type: 'decrement' }), [dispatch]);

  return { count: state.count, increment, decrement };
};

export default useCounter;

// 使用例 (Counter.js)
import React from 'react';
import useCounter from './useCounter';

const Counter = () => {
  const { count, increment, decrement } = useCounter();

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

export default Counter;

注意点:

• Reducerが複雑になりすぎないように注意してください。必要に応じて、より小さなReducerに分割することを検討してください。
• useCallbackを使用して、ディスパッチ関数をメモ化することで、不必要な再レンダリングを防ぎます。
• カスタムフックは、関連する状態ロジックをまとめるのに役立ちますが、過度な抽象化はコードの可読性を損なう可能性があります。

おすすめポイント:

• コンポーネントの状態ロジックが複雑化した場合に、再利用性とテスト容易性を向上させることができます。
• 複数のコンポーネントで同じ状態ロジックを使用する場合に、コードの重複を避けることができます。
• 状態ロジックをコンポーネントから分離することで、コンポーネントをより宣言的に記述できます。