Reactのカスタムフックについて

カスタムフック

紹介

• Reactでは、カスタムフックを作成することで、複雑なロジックを再利用可能な関数として抽象化できます。
• カスタムフックは、useStateやuseEffectなどのReactのフックを組み合わせて、状態管理や副作用の処理を行うカスタムのフックを作成します。

使用方法

カスタムフックは通常、useで始まる名前を付ける必要があります。これにより、Reactがそれがフックであることを認識します。

例: カスタムフック useLocalStorage

import { useState } from 'react';

// カスタムフックの定義
function useLocalStorage(key, initialValue) {
  // ローカルストレージから値を取得
  const saved = localStorage.getItem(key);
  const initial = saved ? JSON.parse(saved) : initialValue;
  
  const [value, setValue] = useState(initial);

  // 状態が更新された時にローカルストレージも更新
  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue];
}

function Example() {
  const [name, setName] = useLocalStorage('name', 'John Doe');

  return (
    <div>
      <h1>こんにちは、{name}!</h1>
      <button onClick={() => setName('Alice')}>名前を変更</button>
    </div>
  );
}

特徴

• カスタムフックは再利用可能なロジックの集約であり、複数のコンポーネントで同じロジックを使いたい場合に便利です。
• フックの内部でuseStateやuseEffectを使い、状態や副作用を管理できます。
• カスタムフックはコンポーネントに依存せず、どのコンポーネントでも使えるため、コードの重複を減らすのに役立ちます。

注意点

• カスタムフックは通常、コンポーネントの外で定義し、コンポーネント内で使用します。
• カスタムフックもReactのルールに従い、コンポーネント内のトップレベルで使用する必要があります。