React Hooks まとめ

このプロジェクトは、ReactのHooks（useState、useEffect、useContextなど）の使い方をまとめたサンプルコード集です。
各Hookの基本的な使用方法から応用例までを網羅しています。

主な内容

  • useState: 状態管理の基本と複数の状態変数の扱い方。
  • useEffect: 副作用の管理、依存配列の使い方、クリーンアップ関数。

サンプル一覧

🔢 useState (カウンター)

現在のカウント: 0

// 1. 状態変数を定義 (TypeScript: number型を明示)
const [count, setCount] = useState<number>(0);

// 2. カウンタ更新関数 (TypeScript: 戻り値型をvoidと明示)
const handleCountUp = (): void => {
    // 状態更新関数形式を使って正確に加算
    setCount(prevCount => prevCount + 1);
}

// 3. カウンタリセット関数
const handleCountReset = (): void => {
    setCount(0);
}

⏱️ useState & useEffect (日本時間リアルタイム時計)

JST: 20:40:43

（この時刻は1秒ごとに更新されます）

// 1. 状態変数を定義 (TypeScript: string型を明示)
const [japanTime, setJapanTime] = useState<string>(getJSTString());

// 2. useEffectで副作用（タイマー）を設定
useEffect(() => {
    // 1秒ごとに時刻を更新
    const timerId: number = setInterval(() => {
        setJapanTime(getJSTString());
    }, 1000);

    // クリーンアップ関数: アンマウント時にタイマーの解除は必須
    return () => clearInterval(timerId);
}, []); // 依存配列は空（[]）

🌐 useContext / useReducer (気分で追加)

このセクションには、複雑な状態管理やグローバルなデータ共有のための`useContext`や`useReducer`のデモを追加できます。

例: 認証状態、テーマ切り替え、ショッピングカートの状態など。

// [将来追加するHooksのロジックをここに記述]

/*
// 例: useContextでグローバルな認証状態を取得
// (このコンポーネントの外側でAuthContextを定義する必要があります)
// const { user, logout } = useAuth();
*/

/*
// 例: useReducerで複雑なカートの状態を管理
// (外部にReducer関数を定義する必要があります)
// const [cart, dispatch] = useReducer(cartReducer, initialCart);
*/