Prompt
全てのReact Hooks、およびカスタムフックのそれぞれの目的とは？
それは、Reactの関数コンポーネントを扱う上で最も重要な知識だね！🚀
React Hooksは、**関数コンポーネントに状態やライフサイクルなどの機能（ステートフルな動作）**を持たせるために存在しているんだ。また、カスタムフックは、そのロジックを再利用可能にするための手法だよ。
💻 1. ビルトイン Hooks の目的
すべての組み込みHooksは、コンポーネントに特定の**「機能」**を注入するために使われるよ。
A. 状態管理（State & Effect）
| Hook | 目的 | 説明 |
|---|---|---|
useState | コンポーネントに状態を持たせる | コンポーネント内で変化する値（State）を定義する。最も基本的なHooksで、再レンダリングのトリガーになる。 |
useReducer | 複雑な状態ロジックを管理する | Reduxのように、現在の状態とActionを受け取り、新しい状態を返す純粋関数（Reducer）を用いて状態を更新する。useStateの複雑な代替手段。 |
useEffect | 副作用（Side Effects）を管理する | コンポーネントのレンダリング後、DOMの操作、データフェッチ、タイマー設定、イベントリスナー登録といった外部とのやり取りを行う。 |
useLayoutEffect | DOM描画後の同期的な副作用 | DOMの変更が画面に反映される直前に実行される。DOMの計測や、描画前にスタイルを変更する必要があるなど、非常に特殊な同期的な副作用に使う。 |
B. パフォーマンス最適化（Memoization）
再レンダリング時の不要な計算やコンポーネントの再生成を防ぐために使われるよ。
| Hook | 目的 | 説明 |
|---|---|---|
useMemo | 値の計算結果をメモ化する | 依存配列が変更されない限り、重い計算の結果を再利用する。不要な再計算を防ぐ。 |
useCallback | 関数の定義をメモ化する | 依存配列が変更されない限り、関数の定義そのものを再利用する。特に子コンポーネントにコールバック関数を渡す際の不要な再レンダリングを防ぐ。 |
C. 参照とDOMアクセス（Refs）
コンポーネントのレンダリングサイクル外で、特定の値や要素を保持するために使われるよ。
| Hook | 目的 | 説明 |
|---|---|---|
useRef | 可変な値を保持、またはDOM要素にアクセスする | 値が変わってもコンポーネントの再レンダリングを引き起こさない。タイマーIDの保持や、DOM要素への直接アクセス（例：focus()を当てる）に使う。 |
useImperativeHandle | 親コンポーネントに特定の関数を公開する | useRefと共に使用し、親が子コンポーネントの特定のアクションを強制的に実行できるようにする（例：childRef.current.reset()）。非推奨なケースが多い。 |
D. コンテキストと外部データ（Context）
コンポーネントツリーを飛び越えて、データを共有するために使われるよ。
| Hook | 目的 | 説明 |
|---|---|---|
useContext | Context（コンテキスト）の値を取得する | 親コンポーネントで定義されたContext（テーマ、認証情報など）を、深い階層の子コンポーネントで簡単に利用できるようにする。 |
🛠️ 2. カスタムフック（Custom Hooks）の目的
カスタムフックは、上記のようなビルトインHooksを組み合わせて作った、独自の関数のことだよ。
-
目的: コンポーネント間で共通する状態ロジックや副作用の処理を再利用可能にする。
-
命名規則: 必ず
useで始まる名前（例：useFetchData、useWindowSize）を付ける必要がある。
例：データ取得ロジックの再利用
特定のAPIからデータを取得するロジック（useStateでローディングとエラー状態を管理し、useEffectでデータフェッチを行う）をカスタムフックにまとめる。
JavaScript
// useFetchData.js
function useFetchData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// ... データ取得と状態更新ロジック ...
}, [url]);
return { data, loading };
}
// 別のコンポーネントで利用
const { data, loading } = useFetchData('/api/users'); // 👈 再利用
これにより、コンポーネントのコードはUIの描画だけに集中でき、ロジックの複雑さはカスタムフックに隔離されるため、保守性と可読性が劇的に向上するんだ！👍