【入門編】 useTransitionによる非緊急アップデートの管理 – React実践ガイド

こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。

Reactを触り始めると、「画面が急にカクつくな……」とか「文字入力の反応がなんだか重いぞ？」という壁にぶつかることが必ずあります。これ、実はあなたのコードが悪いわけではなく、Reactが「全部一気に処理しようとしてパンクしている」だけなんです。

今日は、そんな悩みを魔法のように解決する`useTransition`という、現場でめちゃくちゃ重宝されている「優先順位付けの術」についてお話しします。

—

「お買い物リスト」で考える、Reactの忙しさ

想像してみてください。あなたはスーパーのレジ打ち担当です。

1. 緊急の仕事（入力）： お客さんが次々と商品をカゴに置いていきます。これは素早くスキャンしてあげないと、お客さんはイライラしますよね。
2. 重い仕事（検索・表示）： レジの横で、1万件の商品データベースから「今日のおすすめ」を検索して、さらにそれをリストとして画面に描画する……という作業。

もし、この「重い検索」のせいで、目の前の「商品スキャン」が止まってしまったらどうでしょう？ お客さんは怒って帰ってしまいますよね。

Reactもこれと同じです。「入力（緊急）」と「複雑な計算・描画（非緊急）」を同時にやろうとすると、画面がカクついて操作感が最悪になるんです。

ここで登場するのが`useTransition`です。これを使うと、Reactにこう伝えられるようになります。
「検索処理は大事だけど、まずは入力処理を優先してね。検索結果の更新はちょっと遅れてもいいから、後回しでよろしく！」

—

実際にコードを見てみよう

`useTransition`を使うと、Reactから「今、処理を待機中だよ」というフラグ（`isPending`）と、「この処理を後回しにするよ」という合図（`startTransition`）がもらえます。

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

function SearchApp() {
const [input, setInput] = useState(“”); // 入力された文字
const [list, setList] = useState([]); // 表示するリスト

// 1. useTransitionを準備します
// isPending: 今、後回しにしている処理が進行中かどうか
// startTransition: 「この中身は優先度を下げていいよ」と指示する関数
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
const value = e.target.value;
setInput(value); // 入力値の更新は「緊急」なのでそのまま実行

// 2. リストを更新する重い処理を、startTransitionで囲みます
startTransition(() => {
const newList = Array.from({ length: 10000 }, (_, i) => `${value} – 項目 ${i}`);
setList(newList);
});
};

return (

);
}

—

なぜこの書き方が「現場の知恵」なのか

このコードのポイントは、「ユーザーを待たせないこと」にあります。

• 入力のサクサク感: `setInput`は`startTransition`の外にあります。だから、キーボードを叩いた瞬間に文字が入力されます。
• 重い処理の切り離し: `setList`は`startTransition`の中にあります。Reactは「おっ、これは重い作業だな。先にキーボードの入力を受け付けて、空いた時間にリストを更新しよう」と判断してくれます。
• フィードバックの重要性: `isPending`を使って「読み込み中」を表示しています。ユーザーは「フリーズしたのかな？」と不安にならず、「あ、今計算してるんだな」と待つことができます。この「ちょっとした気遣い」が、プロダクトの質を大きく左右するんです。

—

最後に：つまずいても大丈夫

最初は「`startTransition`って何？ 何を囲めばいいの？」と混乱するかもしれません。でも、それでいいんです。現場のエンジニアも、最初は「とりあえず全部入れたら重くなった」と泣きを見ながら、少しずつ「どこが重いのか？」を切り分けていくんですから。

もし画面が重いと感じたら、まずは「どれが今すぐ反応しなきゃいけない操作で、どれが後回しでもいい結果表示なのか」を紙に書き出してみてください。それができれば、`useTransition`をどこに書くべきか、自然と見えてきます。

Reactは、あなたの書いたコードを一生懸命に実行しようとしてくれます。でも、時には「こっちは後回しでいいよ」と優しく声をかけてあげてください。そうすれば、あなたのアプリは驚くほど軽やかに動くはずです。

一緒に、心地よいUIを作っていきましょう！応援しています。