【入門編】 Concurrent ReactにおけるuseEffectの実行タイミング – React実践ガイド

こんにちは。Reactの世界へようこそ。

Reactを触り始めて、「`useEffect`、便利そうだけどなんだか掴みどころがないな…」と感じたことはありませんか？実はその感覚、すごく正常です。特に最近のReactは「Concurrent（コンカレント）モード」という、まるで魔法のような仕組みが裏側で動いていて、昔ながらの「上から順番に動く」という考え方だけだと、ちょっと混乱してしまうことがあるんです。

今日は、そんな「useEffectの不思議なタイミング」について、難しい言葉をなるべく使わずに、身近な例え話で紐解いていきましょう。

—

1. 「注文」と「調理」の役割分担

Reactのコンポーネントが画面に表示されるまでの流れを、「レストランのキッチン」に例えてみましょう。

レンダリング（注文の処理）： ホールスタッフが注文を受けて、キッチンに伝票を渡す作業です。「何が必要か」を整理する時間ですね。
useEffect（調理・盛り付け）： 実際に火を使ったり、お皿に盛り付けたりする作業です。

ここで重要なのは、「お客さん（ユーザー）を待たせないこと」です。もし、注文が入るたびにキッチンが完全にストップしてしまったら、お店は回りませんよね？

Reactの「Concurrentモード」というのは、「急ぎの注文が入ったら、今やっている作業を一旦横に置いて、別の作業を先に進める」ことができる、とても器用なキッチンのようなものなんです。

—

2. なぜ「中断」が起きるのか？

もし、あなたが「カレー」と「サラダ」を作っている最中に、店長から「先にデザートのアイスを出して！」と言われたらどうしますか？

1. 一旦、カレーの火を止める。
2. アイスを盛り付ける。
3. 余裕ができたら、またカレーの調理に戻る。

Reactもこれと同じことをしています。画面の更新作業（レンダリング）の最中に、より優先度の高い操作（ボタンクリックなど）が入ると、Reactは「今のレンダリングは一旦中断！こっちを先に終わらせよう！」と判断します。

このとき、`useEffect` は「全部の作業が終わって、料理がテーブルに運ばれた後」に実行されるように設計されています。 中途半端に半分だけ出来上がった料理を出すのは嫌ですよね？それと同じで、Reactは「画面が完全に整った、一番安全なタイミング」を見計らって副作用（調理）を実行してくれるんです。

—

3. 実践！useEffectの「クリーンアップ」を理解する

さて、ここで一つ覚えておいてほしいのが「クリーンアップ関数」です。これは、「次の調理を始める前に、前の作業の後片付けをする」ための仕組みです。

例えば、タイマーをセットするような処理で考えてみましょう。

import { useEffect } from ‘react’;

function TimerComponent() {
useEffect(() => {
// 1. 調理開始：タイマーをスタートさせる
const timerId = setInterval(() => {
console.log(‘時間が経過しました’);
}, 1000);

// 2. 後片付け：これが「クリーンアップ関数」です
// Reactは「次に同じ調理をする前」や「コンポーネントが消える時」にこれを呼び出します
return () => {
clearInterval(timerId);
console.log(‘前のタイマーを片付けました！’);
};
}, []); // 依存配列が空なら、初回のみ実行

return

タイマーが動いています！

;
}

なぜ片付けが必要なの？

もし、Reactがレンダリングを何度も中断・再開した時に、古いタイマーを片付けずに新しいタイマーをどんどん起動してしまったらどうなるでしょう？キッチン中がタイマーだらけになって、収拾がつかなくなりますよね。

Reactの賢いところは、「中断されたとしても、最後には必ずクリーンアップ関数を呼んで綺麗にしてから、次のステップへ進む」という約束を守ってくれる点です。

—

4. 初学者のための「安心アドバイス」

「Concurrentモードとか、中断とか言われてもよくわからない…」という方も、全然大丈夫です！以下のポイントさえ守れば、Reactはあなたの味方をしてくれます。

`useEffect` の中身は「純粋な後処理」にする: 画面の表示とは直接関係のない、APIとの通信やタイマー、外部ライブラリの操作などに限定しましょう。
クリーンアップを忘れない: `setInterval` や `addEventListener` を使ったら、必ず `return () => { … }` で解除する処理を書きましょう。これだけで、バグの9割は防げます。
Reactを信じる: Reactは、画面が一番綺麗に見えるタイミングを計算して `useEffect` を動かしてくれます。「いつ実行されるか」を厳密に気にしすぎるよりも、「後片付けさえちゃんとしておけば、Reactがうまくやってくれる」という信頼関係を大切にしてください。

—

まとめ

Reactの `useEffect` は、キッチンの熟練シェフです。Concurrentモードという高度な調理環境の中で、中断や再開を繰り返しながらも、最終的には完璧な料理を届けてくれます。

私たちは、そのシェフが作業を切り替える時に困らないよう、「使い終わった道具はちゃんと洗って（クリーンアップ）、元の場所に戻す」ことだけを意識していればいいのです。

最初は難しく感じるかもしれませんが、この「後片付けの習慣」さえ身につければ、どんなに複雑なアプリケーションを作っても、Reactはあなたを裏切りませんよ。

さあ、今日も安心してReactと楽しくコードを書いていきましょう！応援しています！