【入門編】 Concurrent Renderingの概念と仕組み – React実践ガイド

やあ、Reactの世界へようこそ。フロントエンドの迷宮へ足を踏み入れたばかりの君へ、今日は少しだけ「魔法」の話をしようと思う。

React 18から導入された「Concurrent Rendering（並行レンダリング）」。名前だけ聞くと、なんだかSF映画のコンピューター用語みたいで身構えてしまうよね。でも大丈夫。実はこれ、僕たちが普段の生活で無意識にやっている「マルチタスク」と全く同じ考え方なんだ。

今回は、このReactの「裏側の秘密」を、肩の力を抜いて紐解いていこう。

—

1. 「一度に一つしかできない」という呪縛からの解放

君がもし、料理をしているところを想像してみてほしい。

1. お湯を沸かす（時間がかかる）
2. 野菜を切る（集中力が必要）
3. パスタを茹でる（タイミングが命）

昔のReactは、いわば「お湯が沸くまで、野菜を一切切ってはいけない」という頑固な料理人だった。お湯が沸くのをボーッと見つめて、沸騰して初めて次の作業に移る。これだと、アプリの画面がカクついたり、ボタンを押しても反応しなかったりする原因になるんだ。

Concurrent Renderingは、この料理人に「お湯が沸くのを待っている間、野菜を切ってもいいんだよ」と教える仕組みのこと。Reactが裏側で、作業の優先順位を判断して、臨機応変にタスクを切り替えてくれるようになったんだ。

2. レンダリングを「中断」する魔法

従来のReactは「レンダリング（画面の描画）が始まったら、終わるまで止まらない」というルールだった。でも、もしものすごく重い計算が必要な画面を描画している最中に、ユーザーが「戻る」ボタンを押したらどうなる？

今までのReactなら、その重い計算が終わるまでボタンの反応は無視されていた。これが「アプリが重い」と感じる正体だ。

Concurrent Renderingでは、Reactはこう考える。
「あ、もっと大事な作業（ボタンのクリック）が来たな。今の描画作業は一旦中断して、先にユーザーの操作を処理しよう！」

この「中断できる」という能力こそが、React 18以降の最大の進化なんだ。

3. コードで見る「優先順位」のコントロール

実際にどうやってこの魔法を使うのか、Reactが用意してくれた`useTransition`という便利なフックを覗いてみよう。これを使うと、「これは急ぎじゃないから、後回しにしてもいいよ」とReactに伝えられるんだ。

import React, { useState, useTransition } from ‘react’;

function App() {
const [text, setText] = useState(“”); // 入力中の文字
const [list, setList] = useState([]); // 表示する大量のリスト
const [isPending, startTransition] = useTransition(); // 「後回し」を管理する魔法のフック

const handleChange = (e) => {
const value = e.target.value;
setText(value);

// ユーザーの入力は「今すぐ」反映させたい（優先度：高）
// リストの更新は「ちょっと重いから後回しでOK」（優先度：低）
startTransition(() => {
const newList = Array.from({ length: 10000 }, (_, i) => `${value} – ${i}`);
setList(newList);
});
};

return (

);
}

このコードの肝は `startTransition` だ。これを使うことで、入力フィールドの文字はサクサク動くのに、裏側では大量のリストが（裏でこっそり）計算されている。ユーザー体験を損なうことなく、賢く動くアプリが作れるようになるわけだね。

4. なぜこれが大事なのか？

正直に言うと、小さなアプリを作っているうちは、この仕組みを深く意識しなくても動いてしまうかもしれない。でも、君がこれから成長して、何千人、何万人ものユーザーが使うサービスを作るようになった時、この「レンダリングの優先順位」の知識が君を救うことになる。

• 「画面が固まった！」というクレームが減る
• ユーザーの操作感が圧倒的に滑らかになる
• 無駄な再レンダリングをReact自身が賢く制御してくれる

最後に：完璧主義を捨てよう

ここまで読んで「うわ、難しそう…」と感じたかもしれないけれど、心配はいらないよ。Reactのアーキテクチャは、君がコードを書けば書くほど自然に身についていくものだ。

まずは「Reactは、裏で賢くタスクの順番を入れ替えてくれているんだな」というイメージを持つだけで十分。それだけで、君の書くコードは確実に一段上のレベルへ進んでいるはずだから。

分からないことがあれば、またいつでも聞きに来てね。君のエンジニアとしての冒険を、僕はこれからも応援しているよ。