女性向けエンジニアスクール
3秒でわかる
state や props が変わったとき、React がコンポーネント関数をもう一度実行して画面を更新する動き。遅さの原因を追うときの起点になります。
30秒図解
もう少し詳しく
どういうものか
React が、あるコンポーネントの関数をもう一度実行し直す動きを再描画と呼びます。きっかけは主に 3 つで、自分の state が変わったとき、親から渡された props が変わったとき、そして親そのものが再描画されたときです。関数が再実行されると新しい JSX が返り、React はそれを前回の結果と比べて、違っている部分だけを実際の DOM に反映します。
なぜ必要か
画面はデータの写像として書きたいものです。「ボタンを押したらこの span の textContent を書き換える」と手続きで書くと、状態が増えるほど更新漏れが起きます。React は state を変えるだけで画面が追従する形にすることで、この漏れを構造的に無くしています。再描画はその仕組みの実行部分そのものです。
具体例
function Counter() {
const [count, setCount] = useState(0);
console.log("Counter が再実行された", count);
return (
<div>
<p>{count} 回</p>
<button onClick={() => setCount(count + 1)}>押す</button>
<Heavy />
</div>
);
}
// Counter が再描画されると Heavy も再実行される。
// props が何も変わっていなくても関数は走る。
const Heavy = React.memo(function Heavy() {
return <p>重い表示</p>;
});つまずきやすいところ
似た用語との違い
| 用語 | 誰の仕事か |
|---|---|
| 再描画 | React がコンポーネント関数を再実行する |
| 差分検出 | React が前回の JSX と比べて更新箇所を絞る |
| リフロー / リペイント | ブラウザが実際にレイアウト計算と描画をする |
