😎

useEffect, useState についてあらためてまとめる

2025/04/03に公開

初めに

useState と useEffect は React での状態管理と副作用処理の基本となるフックです。それについてまとめようと思います。

useState（状態管理フック）

useStateの基本構文

const [state, setState] = useState(初期値);

state → 現在の状態（データ）
setState → 状態を更新するための関数
初期値 → state の初期値（数値、文字列、配列、オブジェクトなど）

useEffect（副作用処理フック）

useEffectの基本構文

useEffect(() => {
  // 副作用処理
  return () => {
    // クリーンアップ処理（任意）
  };
}, [依存値]);

3つのポイント

副作用処理（useEffect 内の最初の関数）
- DOM の操作
- API からのデータ取得
- イベントリスナーの登録など
クリーンアップ処理（return の関数）
- イベントリスナーの削除
- タイマーのクリアなど
依存配列（[]）
- 依存値が変わった時だけ useEffect を実行する

イベントリスナーってなーに

イベントリスナーとは、「あるイベント（クリック・キー入力・マウス移動など）が発生したときに実行する処理」を登録する仕組みのことです。例えば、「ボタンがクリックされたときにメッセージを表示する」などの処理を実行できます。削除しないとメモリリークの原因になり、パフォーマンスが悪化する可能性がある。

useEffect の使い方

初回レンダー時のみ実行（マウント時）
依存配列 [] を空にすると、コンポーネントが初めて表示される時だけ実行されます。

useEffect(() => {
  console.log("コンポーネントがマウントされた！");
}, []);

状態や props が変わるたびに実行（更新時）
依存配列に変数を入れると、その変数が変わった時に useEffect が再実行されます。

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`カウントが変更された: ${count}`);
}, [count]);

実行タイミング: count の値が変わるたびに実行

初めに