カスタムフックの抽象化

Reactコンポーネントが肥大化していませんか？それは 「関心の分離」 ができていないサインかもしれません。

抽象化のメリット

1. テストが容易になる: ロジック単体でテストできるようになります。
2. UIとロジックの分離: コンポーネントは「どう表示するか」に集中できます。
3. DRY原則: 同じ処理を複数の場所で書く必要がなくなります。

実践例：useLocalStorage

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}

カスタムフックを作る際は「このフックが何をするか」という 責任 を明確にすることが重要です。