こんにちは。Reactの世界へようこそ。
Reactで「時間が経ったら何かをする」という機能を作ろうとして、`setTimeout`や`setInterval`を使いたくなる場面は必ず訪れます。でも、いざコードを書き始めると「あれ？なんかタイマーが変な動きをするぞ？」「画面を閉じても裏で何かが動いている気がする…」そんな経験をしたことはありませんか？
大丈夫です、それはあなたが悪いわけではありません。Reactの「魔法の杖」である`useEffect`が、実はちょっとだけ気難しい性格をしているだけなんです。
今日は、そんなタイマー処理の「後始末」について、料理に例えてお話ししますね。
—
タイマーは「キッチンタイマー」と同じ
`setTimeout`は「3分経ったらカップ麺ができあがるよ」と教えてくれるキッチンタイマーのようなものです。
Reactの`useEffect`の中でこれを使うとき、一番大事なのは「コンポーネントが消えるときに、タイマーもちゃんと止めること」です。これを忘れると、誰もいないキッチンでずっとアラームが鳴り続ける…なんていう、ホラーな現象が起きてしまいます。
「クリーンアップ関数」というお片付け
Reactには、コンポーネントが画面から消える直前に実行される「お片付け（クリーンアップ関数）」という仕組みがあります。`useEffect`の中で`return () => { … }`と書く、あれですね。
これを使わずにタイマーを放置すると、メモリという名のキッチンがタイマーだらけになって、アプリが重くなったり、意図しないバグを引き起こしたりします。
—
実践！タイマーの正しい使い方
では、実際に「1秒ごとに数字が増えるカウンター」を作ってみましょう。ここでのポイントは、「タイマーをセットする」と「タイマーを止める」をセットで考えることです。
import { useState, useEffect } from ‘react’;
function TimerComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// 1. タイマーをセットして、そのIDを記録する
// 「タイマーID」は、このタイマーを止めるための「鍵」のようなものです
const timerId = setInterval(() => {
setCount((prev) => prev + 1);
}, 1000);
// 2. お片付け（クリーンアップ関数）
// コンポーネントが画面から消えるとき、この関数が自動で呼ばれます
return () => {
// 記録しておいた「鍵（timerId）」を使って、タイマーを確実に止める！
clearInterval(timerId);
console.log(“お片付け完了：タイマーを止めました”);
};
}, []); // 空の配列は「最初の一回だけ実行」の合図
return
;
}
なぜ`clearInterval`が必要なの？
もし`return`の中で`clearInterval`を忘れてしまうと、コンポーネントが何度も表示されたり消えたりするたびに、裏側で「新しいタイマー」が次々と増殖します。
たとえるなら、「使ったお皿を洗わずに、新しいお皿を次々に出している状態」です。これではキッチンがすぐに溢れてしまいますよね。`clearInterval`は、使い終わったお皿を丁寧に洗って棚に戻す作業そのものなんです。
—
よくある落とし穴：依存配列のワナ
「タイマーの中で変数の値を使いたい！」と思ったとき、`useEffect`の依存配列（`[]`の部分）にその変数を入れようとしていませんか？
もし`[count]`のように入れてしまうと、`count`が変わるたびに`useEffect`が「一旦タイマーを消して、また新しいタイマーを作る」という動作を繰り返します。これだと、カウントアップするたびにタイマーがリセットされてしまい、チクタクと刻むリズムが狂ってしまいます。
現場の知恵：
「状態を更新する関数（`setCount`など）」には、常に最新の値を参照できる「関数型更新（`prev => prev + 1`）」という書き方があります。これを使えば、`useEffect`の依存配列を空っぽのままにしておけるので、タイマーを無駄に再生成しなくて済みます。
—
最後に：完璧を目指さなくて大丈夫
最初は「`useEffect`がいつ動いて、いつ片付くのか」を完璧に理解するのは難しいかもしれません。でも、「タイマーを動かしたら、必ず`return`で止める」というルールさえ守れば、Reactのアプリは驚くほど安定します。
まずはこのパターンをそのままエディタに書いてみて、ブラウザのコンソールを見ながら「あ、画面を閉じたらお片付けが呼ばれた！」という成功体験を積んでみてください。
プロのエンジニアも、最初はみんなここでつまずいています。一歩ずつ、丁寧にコードを書いていきましょうね。あなたのReactライフが、少しでも快適なものになりますように！
コメント