こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいことがあります。
Reactを学び始めると、誰もが一度は「`useEffect`って何者？ なんでこんなに言うことを聞いてくれないの？」と頭を抱える瞬間がありますよね。特に「クリーンアップ関数」という概念は、まるで難解なパズルのピースのように感じるかもしれません。
でも、大丈夫。コツさえ掴めば、これはあなたの最強の武器になります。今日は、この「後片付けの魔法」について、少しだけお茶を飲みながら一緒に紐解いていきましょう。
—
クリーンアップ関数は「退室時のお片付け」
`useEffect`を使うとき、私たちは「何かを始めたら、終わらせる準備もする」というルールを意識する必要があります。
想像してみてください。あなたは今、「カフェの席」に座ろうとしています。
1. 座る（エフェクト実行）: 荷物を置き、PCを開いて仕事を始める。
2. 仕事中（エフェクト中）: カフェで集中している状態。
3. 帰る（クリーンアップ関数）: 席を立つ前に、ゴミを捨て、忘れ物がないか確認し、椅子を引く。
もしこの「お片付け」を忘れるとどうなるでしょう？ 次の人が座るとき、前の人のゴミが残っていたら大変ですよね。Reactの世界でも同じです。前の情報の残り香（メモリリークや意図しない動作）を防ぐために、この「クリーンアップ関数」が非常に大切なのです。
クリーンアップ関数は「いつ」動くのか？
ここが一番のつまずきポイントです。実は、クリーンアップ関数は「次にエフェクトが実行される直前」か「コンポーネントが画面から消える（アンマウント）瞬間」に呼び出されます。
import { useEffect } from ‘react’;
function MyComponent() {
useEffect(() => {
console.log(“① カフェに座りました！”);
// これが「お片付け（クリーンアップ関数）」です
return () => {
console.log(“② さようなら、綺麗にして帰ります！”);
};
}, []); // 依存配列が空なら、コンポーネントが消えるときだけ動きます
}
依存配列が「変化したとき」の流れ
もし依存配列に値を入れると、こんなことが起こります。
1. 「あ、値が変わった！」とReactが気づく。
2. まず古い方のクリーンアップ関数を実行して、前の状態をリセットする。
3. 新しいエフェクトを実行して、最新の状態にする。
つまり、「古いものを片付けてから、新しいものを始める」という非常に丁寧な手順を踏んでいるんです。Reactって、実はすごくマメな性格なんですよ。
—
実践例：タイマーで理解する「お片付け」
例えば、画面に1秒ごとに数字が増えるカウンターを作るとしましょう。ここでクリーンアップを忘れると、タイマーが止まらずに何個も重なって動いてしまい、ブラウザが悲鳴を上げることになります。
import { useState, useEffect } from ‘react’;
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
// タイマーを開始する
const interval = setInterval(() => {
setCount((prev) => prev + 1);
console.log(“カウント中…”);
}, 1000);
// クリーンアップ関数：コンポーネントが消える時、または再レンダリング前に実行
return () => {
clearInterval(interval); // ここでタイマーをしっかり止める！
console.log(“タイマーを掃除しました”);
};
}, []); // 空の配列なので、アンマウント時に一度だけ実行
return
{count} 秒経過
;
}
この `clearInterval(interval)` があるからこそ、画面を閉じてもタイマーが裏でずっと動き続けるという「幽霊タイマー」を防げるのです。
—
最後に：完璧じゃなくていい
初学者のうちは、「クリーンアップ関数を書き忘れてエラーになった！」なんてことは日常茶飯事です。僕も昔は何度もやらかしました。
大事なのは、「あ、この処理は終わらせておかないとまずいかも？」という直感を持つことです。
- 通信のリクエストはキャンセルできるかな？
- イベントリスナーは解除しなきゃいけないかな？
そうやって一つずつ、「後片付け」を意識するだけで、あなたの書くReactコードは驚くほどプロフェッショナルで、安定したものに変わっていきます。
今日から、`useEffect`を書くときは、セットで `return () => { … }` を書く癖をつけてみてください。その小さな習慣が、いつかあなたを救う大きな力になります。
もし迷ったり、つまずいたりしたら、いつでも戻ってきてくださいね。Reactの旅はまだ始まったばかり。ゆっくり、楽しみながら進んでいきましょう！
コメント