React の機能である Hooks（フック） は、関数コンポーネントの中で状態管理や副作用（API通信、DOM操作など）を扱うための仕組みです。 第1章では、最も頻繁に使用される と を取り上げ、コンポーネントがどのように「レンダリング」され、「副作用が実行されるか」というライフサイクルの流れを図解で学びます。 1. useState による状態管理の基本 は、コンポーネント内に「状態（State）」を持たせるためのフックです。状態が更新されると、Reactはコンポーネントを再レンダリング（再描画）します。 * (状態変数): 現在保持されている値です。 * (更新関数): 値を更新するための関数です。これを使って値を変更すると、Reactに再レンダリングがトリガーされます。 2. useEffect のライフサイクルと実行タイミング は、レンダリング結果が画面に反映された「後」に実行される副作用（Side Effect）を定義します。 実行の流れ（ライフサイクル） 依存配列（Dependencies）による制御 の第2引数に渡す配列によって、実行タイミングを制御できます。 依存配列の指定 実行されるタイミング 指定なし () 毎回のレンダリング後 に常に実行される 空の配列 () 初回のマウント時（画面表示時）のみ 実行される 値あり () 初回マウント時 ＆ の値が変わったときのみ 実行される 3. クリーンアップ関数（Cleanup）の重要性 内でイベントリスナーの登録やタイマーの設置（）を行った場合、コンポーネントが消える（アンマウント）前や、次の副作用が実行される前に、それらを解除（クリーンアップ）する必要があります。 これを怠ると、メモリリーク や予期しないバグの原因になります。 クリーンアップの書き方 コンポーネブラウザ上で非表示になる際、Reactは自動的にこの返された関数（）を呼び出して、タイマーをストップします。 次のチャプターでは、これらを応用して独自のロジックを切り出す「カスタムフック」について学びます！