Reactの「自動バッチ処理」を攻略しよう！画面がチラつかない、賢いレンダリングの仕組み
こんにちは！Reactの世界へようこそ。
Reactを学び始めると、必ずと言っていいほど「レンダリング（画面の再描画）」という言葉に出会いますよね。「状態（State）を更新すると画面が変わる」というのは基本中の基本ですが、実はReactは裏側で、私たちが想像する以上に「空気を読んで」動いてくれています。
今日は、React 18から標準機能となった「Automatic Batching（自動バッチ処理）」という、ちょっと名前は強そうだけど実はとっても優しい機能について解説しますね。
—
そもそも「バッチ処理」って何？お買い物の例えで考えてみよう
皆さんは、スーパーでレジに並んでいるところを想像してみてください。
もし、カゴに10個の商品が入っていて、店員さんが「1個スキャンするごとに、わざわざ一旦お店の外に出て、また戻ってきて次の1個をスキャンする」という動きを繰り返したらどうでしょう？ものすごく時間がかかりますよね。
私たちなら、「カゴの中身をまとめてドサッとカウンターに置いて、一気にピッピッピッと終わらせる」はずです。
Reactの「バッチ処理」は、まさにこれと同じです。
Reactは、`setState`（状態を更新する関数）が呼ばれるたびに、「はい、画面書き換えて！」と反応するのですが、もしそれが1回の操作で複数回あった場合、「あ、まだ続きがありそうだから、全部まとめてから1回で画面を書き換えよう！」と気を利かせてくれるのです。
これが「自動バッチ処理」の正体です。
—
実際のコードで動きを見てみよう
まずは、このコードを見てください。ボタンを押すと、2つの状態を同時に更新する例です。
import { useState } from ‘react’;
export default function Counter() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
const handleClick = () => {
// 状態を2回更新しています
setCount(c => c + 1); // 1. カウントを増やす
setFlag(f => !f); // 2. フラグを切り替える
// ここでReactは賢く判断します：
// 「あ、2つも更新があるのか。じゃあ両方終わるのを待ってから、
// 画面を1回だけ描き直そう！」と判断してくれます。
};
console.log(“レンダリングされました！”); // 画面が描画されるたびにログが出るよ
return (
カウント: {count} / フラグ: {flag.toString()}
);
}
このコードを実行してボタンを押しても、コンソールには「レンダリングされました！」というログは1回しか出ません。Reactが2つの更新を「バッチ（束）」にして、1回の描画で済ませてくれたからです。これによって、画面のチラつきを防ぎ、パフォーマンスを極限まで高めているんですね。
—
「あれ、思った通りに動かない？」という時の注意点
「じゃあ、どんな時でもReactはバッチ処理してくれるんだね！」…と言いたいところなのですが、一つだけ、現場でよくつまずくポイントがあります。
「非同期処理の中では、Reactが気を利かせられないことがある」
昔のReactでは、`setTimeout`や`Promise`（API通信など）の中で状態を更新すると、バッチ処理が効かないことがありました。しかし、React 18以降はこれらも自動的にバッチ処理の対象になっています！
ただ、「どうしても更新した直後の最新の状態を知りたい！」というケースが出てきたら注意が必要です。
const handleClick = () => {
setCount(count + 1);
console.log(count); // ここでログを出しても、まだ古い値のまま！
};
「あれ？更新したはずなのに値が変わってない！」と焦る必要はありません。これもReactが「まだ描画前だから、古い値を表示しているだけ」という、正常な挙動なんです。
—
現場で役立つ「焦らないための心構え」
Reactのレンダリングの仕組みを理解すると、開発がぐっと楽になります。最後に、現場で大切にしている考え方を一つ伝授しますね。
- 「Reactを信じる」: Reactは常にパフォーマンスを最適化しようと努力しています。「何度も画面を書き換えたくない」というReactの意思を尊重してあげましょう。
- 「レンダリング回数に一喜一憂しない」: 最初は「レンダリングが何回走っているか」が気になりますが、React 18以降は自動バッチ処理のおかげで、ほとんどのケースで最適化されています。まずは「正しく動くこと」を優先して大丈夫ですよ。
まとめ：Reactの優しさを感じよう
自動バッチ処理は、私たちが書くコードを少しでも効率よく、そして速く動かすためにReactが背後で頑張ってくれている「おもてなし」のようなものです。
もしプログラムを書いていて「思ったより画面の更新が少ないな？」と感じたら、それはReactがあなたのコードを一生懸命まとめてくれている証拠。そう思うと、Reactが少し愛おしく感じませんか？
これからも、焦らず一歩ずつ、Reactとの対話を楽しんでいきましょう！応援しています！
コメント