こんにちは。Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いていると、誰もが一度は「あれ？このコード、いつ動いてるんだ？」という霧の中に迷い込む瞬間があります。特に`useEffect`のクリーンアップ関数は、まさにその霧のど真ん中。
でも、大丈夫。安心してください。今日はこの「クリーンアップ関数」という少し気難しい相棒と、仲良くなるための物語を書きたいと思います。
—
クリーンアップ関数は「退室前の片付け」
`useEffect`の中に書く「return」の中身。これがクリーンアップ関数ですね。
これを難しく考えすぎないでください。イメージは「ホテルのチェックアウト」です。
あなたが部屋（コンポーネント）に入って、荷物を広げたり（副作用の開始）、電気をつけたりしたとします。でも、チェックアウトする時（コンポーネントが消える時）や、次の宿泊客のために部屋を整える時（再レンダリング時）、そのままにして帰ったらダメですよね。
- 「あれ？電気消したっけ？」
- 「広げた荷物はちゃんと鞄に詰めたかな？」
この「次に進む前、あるいは部屋を出る前に、前の状態をきれいにリセットする」のがクリーンアップ関数の役割です。
なぜこれが重要なのか？
もし片付けを忘れると、メモリが圧迫されたり、古いデータが画面に残ってバグの原因になったりします。いわゆる「ゴミ屋敷化」です。Reactは「君が片付けを忘れても、僕がいつでも呼べるようにここに準備しておくよ」と言って、この仕組みを用意してくれているんです。
—
実行タイミングは「ブラウザが描画する直前」
ここが一番のつまずきポイントですが、シンプルに言いますね。
Reactの副作用（`useEffect`）は、「ブラウザが画面を塗り替えた（ペイントした）後」に実行されます。
そして、クリーンアップ関数は「次の副作用を実行する直前」か「コンポーネントが画面から消える直前」に動きます。
これを図解すると、こんなイメージです：
1. レンダリング（Reactが画面の設計図を描く）
2. ブラウザのペイント（ユーザーに画面が見える！）
3. クリーンアップ関数（「前の残骸」を片付ける）
4. 新しい副作用（「新しい設定」を適用する）
ユーザーから見ると、前の残骸と新しい設定が混ざって変な表示になることはありません。Reactは非常に賢く、「新しいものを出す前に、古いものをしっかりしまう」というマナーを守っているんです。
—
コードで見てみよう：タイマーの例
身近な例として、「カウントダウンタイマー」を考えてみましょう。
import { useState, useEffect } from ‘react’;
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
// 【セットアップ】タイマーをスタート！
const timerId = setInterval(() => {
setCount((prev) => prev + 1);
}, 1000);
// 【クリーンアップ】タイマーを停止する（片付け）
// コンポーネントが消える時、または次にこのuseEffectが走る前に実行されます
return () => {
console.log(“タイマーを掃除します！”);
clearInterval(timerId);
};
}, []); // 依存配列が空なら、アンマウント時のみ片付けが実行されます
return
;
}
このコードで、もし`return`の中の`clearInterval`を忘れたらどうなるでしょう？
コンポーネントが消えてもタイマーが裏で動き続け、メモリを食いつぶす「メモリリーク」が発生します。これが「片付け忘れ」の怖いところです。
—
つまずいた時のための「魔法の呪文」
もしクリーンアップ関数がいつ呼ばれているか分からなくなったら、迷わず`console.log`を仕込んでください。
useEffect(() => {
console.log(“① 準備完了！”);
return () => {
console.log(“② 片付けます！”);
};
}, [count]); // countが変わるたびに準備と片付けが繰り返されます
これをブラウザのコンソールで見ると、Reactがどれだけ律儀に「片付けてから、準備する」を繰り返しているかが手に取るように分かります。
最後に
Reactのライフサイクルを頭の中だけで完璧にシミュレーションするのは、ベテランでも難しいものです。だから、まずは「副作用で何かを作ったら、必ずその反対の処理をreturnで書く」という習慣をつけてみてください。
「あ、これタイマーだから、止める処理を書かなきゃ」
「あ、これイベントリスナーだから、解除しなきゃ」
そうやって一つずつ積み重ねていけば、いつの間にかあなたはReactのアーキテクチャを肌感覚で理解する「職人」になっていますよ。
分からなくなったら、いつでもこのページに戻ってきてくださいね。あなたのReactライフを応援しています！
コメント