Part 7 · レンダリングの仕組み

再レンダリングとは何か

画面が描き直されるまでに起きていること

Part 4-1 で、setCount は画面を直接書き換えるのではなく、関数をもう一度実行させると説明しました。

この章では、その「もう一度実行する」という動きを目で見える形にします。

React では、コンポーネントの関数が実行されることを再レンダリングと呼びます。これが起きても、画面のすべてが一から作り直されるわけではありません。

再レンダリングとは、関数がもう一度実行されること

React のコンポーネントは関数です。 state を変えると、その関数がまた呼ばれます。これが 再レンダリング です。

再レンダリングのカウンター

押すたびにコンポーネント関数がもう一度走る

このコンポーネントは 0 回ボタンを押されました。

左のデモでボタンを押すと、右上の数字が増えます。これは「このデモの中の tracked コンポーネントが再び描かれた」ことを表しています。

render-counter.tsx

"use client";

import { useTrackDemoRender } from "@/components/lesson/demo-card";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export function RenderCounter() {
	const [count, setCount] = useState(0);
	useTrackDemoRender();

	return (
		<div className="flex flex-col gap-4">
			<p>このコンポーネントは {count} 回ボタンを押されました。</p>
			<Button size="sm" onClick={() => setCount((current) => current + 1)}>
				再レンダリングする
			</Button>
		</div>
	);
}

再レンダリングは、画面の更新ではない

const [count, setCount] = useState(0);

function RenderCounter() {
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

setCount は React への依頼です。「値が変わったよ」と教えます。 React はそのあと、コンポーネントの関数をもう一度実行します。

そして React は、前回の結果と今回の結果を比べて変わったところだけを実際の画面に反映します。すべてをまっさらに作り直すわけではありません。

render-counter.tsx

"use client";

import { useTrackDemoRender } from "@/components/lesson/demo-card";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export function RenderCounter() {
	const [count, setCount] = useState(0);
	useTrackDemoRender();

	return (
		<div className="flex flex-col gap-4">
			<p>このコンポーネントは {count} 回ボタンを押されました。</p>
			<Button size="sm" onClick={() => setCount((current) => current + 1)}>
				再レンダリングする
			</Button>
		</div>
	);
}

理解できたか確かめる

確認クイズ

再レンダリングとは何ですか？

確認クイズ

setCount を呼んだとき、React は何をしますか？

render-counter.tsx

"use client";

import { useTrackDemoRender } from "@/components/lesson/demo-card";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export function RenderCounter() {
	const [count, setCount] = useState(0);
	useTrackDemoRender();

	return (
		<div className="flex flex-col gap-4">
			<p>このコンポーネントは {count} 回ボタンを押されました。</p>
			<Button size="sm" onClick={() => setCount((current) => current + 1)}>
				再レンダリングする
			</Button>
		</div>
	);
}