hooks

hooksは、React が用意してる 関数的な仕組みで、コンポーネントに状態や副作用などを追加するためのもの

React が提供してる「ビルトイン Hook」：

useState → 状態管理
useEffect → 副作用（ useEffect内でデータ取得やDOM操作）
useContext → Context の値を読む
useReducer → 複雑な状態管理
useRef → 値やDOM参照の保持

カスタムフック

カスタムフック = Hooksを組み合わせたロジックの再利用単位

/hooks/useLocale.ts ：

import { useState } from "react";

export function useLocale() {
  const [locale, setLocale] = useState<"ja" | "en">("ja");

  const toggleLocale = () => {
    setLocale((prev) => (prev === "ja" ? "en" : "ja"));
  };

  return { locale, toggleLocale };
}

page.tsx ：

export default function Page() {
  const { locale, toggleLocale } = useLocale();

  return (
    <button onClick={toggleLocale}>
      {locale === "ja" ? "日本語" : "English"}
    </button>
  );
}

hooksを別のファイルに分離することで、page.tsx 等の肥大化を避けられる
カスタムフックだと状態はimport先のファイル毎に異なるので、上記の locale のような状態はグローバルで管理するべきである

--> グローバルに状態を管理するには

context

ReactのContext APIを使うことで、コンポーネントツリー全体にデータを渡すことができます。
これにより、データを子コンポーネントへ「props drilling」（propsの繰り返し渡し）をせずに済みます。

コンテキストファイルのひな型・使用例

themeContext.tsx：

"use client";
import React, { createContext, useState, useContext } from 'react';

// 1. コンテキストを作成
const ThemeContext = createContext("light");

// 2. プロバイダーコンポーネントを作成 
export const ThemeProvider = ({ children }) => {

  // 状態とそれを更新する関数
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  // Providerの内部にあるコンポーネントは、どこからでも useContext(ThemeContext) 経由でvalueの値を呼び出せるようにする
  return (
    <ThemeContext.Provider value={{ theme, setTheme , toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. コンテキストを使いやすくするためのカスタムフックを作成
export const useTheme = () => useContext(ThemeContext);

page.tsx：

import React from 'react';
import { ThemeProvider, useTheme } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      <Main />
    </ThemeProvider>
  );
};

const Main = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={theme}>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default App;

hooksでよくあるミス

分割代入で取得していない

// X
const auth = useAuth()

Providerを作成する時に複数の要素を渡す場合 value={{ theme, setTheme }}のようにオブジェクトで渡すのが普通なので、取得するときは分割代入で取得する。

-->

// O
const { auth } = useAuth()

関数を呼び出していない

// X
const { auth , setAuth } = useAuth;

()を忘れている

-->

const { auth , setAuth } = useAuth();

React：hooks / context

React：hooks / context