Reactを学ぶ上で、useEffect・dependency（依存配列）・状態管理はセットで理解すると分かりやすいです。
1. Reactは「状態(State)」が変わると再レンダリングする
Reactでは、画面はStateから作られます。
const [count, setCount] = useState(0);
State
↓
画面(UI)
例えば
setCount(1);
すると
State変更
↓
再レンダリング
↓
画面更新
となります。
つまり
State = 画面の元データ
です。
2. 再レンダリングとは
例えば
function App() {
console.log("render");
const [count, setCount] = useState(0);
return (
<>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
+
</button>
</>
);
}
ボタンを押すたびに
render
render
render
と表示されます。
つまり
コンポーネント関数がもう一度実行される
ことを再レンダリングといいます。
3. useEffectとは
レンダリング後に実行したい処理を書くHookです。
例えば
useEffect(() => {
console.log("実行");
});
流れ
render
↓
画面表示
↓
useEffect実行
つまり
画面表示後の処理
を書く場所です。
4. dependency（依存配列）
useEffectには
useEffect(() => {
}, []);
の
[]
があります。
これが**依存配列（Dependency Array）**です。
Reactは
「この値が変わったらEffectを実行する」
という意味で使います。
パターン①
依存配列なし
useEffect(() => {
console.log("実行");
});
毎回
render
↓
Effect
になります。
パターン②
空配列
useEffect(() => {
}, []);
初回だけ
初回render
↓
Effect
↓
終了
ボタンを押しても
Effectは動かない
パターン③
Stateを指定
useEffect(() => {
}, [count]);
count変更
↓
render
↓
Effect
countが変わったときだけ動きます。
5. dependencyに書くもの
基本ルール
Effect内で使うStateやProps
例えば
useEffect(() => {
console.log(count);
}, [count]);
countを使っているので
[count]
になります。
6. 状態管理とは
状態管理とは
データをどこで持つか
です。
例えば
ユーザー情報
ログイン状態
テーマ
選択中のID
これらはすべて状態です。
ローカル状態
const [count, setCount] = useState(0);
そのコンポーネントだけで使います。
親子で共有
Parent
↓
Child
親がStateを持ち
props
で渡します。
全画面で共有
例えば
ログイン情報
テーマ
言語
なら
Context
Redux
Zustand
などを使います。
7. useEffectでよくやること
API取得
useEffect(() => {
fetchUsers();
}, []);
画面表示時に取得。
イベント登録
useEffect(() => {
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
終了時に解除も行います。
値の監視
useEffect(() => {
console.log(searchText);
}, [searchText]);
検索文字が変わるたびに実行。
8. useEffectを書かなくてよいケース
Reactでは、「副作用」のためにuseEffectを使います。
一方で、単純な計算や判定はuseEffectではなく、レンダリング中やイベントハンドラ内で行うのが基本です。
例えば、
const isValid = name.length > 0;
や
const handleClick = () => {
if (!shouldExecute(params)) {
return;
}
execute();
};
のような処理はuseEffectではなく、その場で実行します。
まとめ
| 用語 | 役割 |
|---|---|
useState |
画面に表示する状態を保持する |
| 再レンダリング | State変更によりコンポーネントが再実行されること |
useEffect |
レンダリング後に副作用を実行する |
| dependency（依存配列） | 「どの値が変わったらEffectを再実行するか」を指定する |
| 状態管理 | データをどこで保持・共有するかを設計すること |
覚えておきたいポイント
-
useState：画面に影響するデータを持つ。 -
useEffect：レンダリング後に行う副作用（API呼び出し、イベント登録など）を書く。 - 依存配列：Effectが再実行される条件を指定する。
- 状態管理：状態をローカルで持つか、親子で共有するか、アプリ全体で共有するかを設計する。
この4つの関係を理解すると、Reactのコードが格段に読みやすくなります。