浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】開発者ツール抜きで再レンダリングされたことを検知するためのコードの紹介

 React は JavaScript で UI を作るためのフレームワークでレンダリングという DOM を変える処理があります。このレンダリングが再帰等で異常に連続すると web ページは非常に重くなり、操作不能になることもざらです。この状態に陥っているかを検証するためにレンダリングの度にそれを伝えてくれる仕組みが欲しくなります。よく使うのは React の開発者ツール用拡張です。これはレンダリングのたびにボーダーが光る様に視覚的に変化を伝えてくれます。

Chrome ウェブストア – 拡張機能
【React】レンダリングタイミングの制御でパフォーマンスを向上 – 株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発

 これは便利なのですが一色で一度光るとしばらく残るというデザイン上、連続したレンダリングを見つけづらいです(代わりに副作用的なレンダリングは見つけやすいです)。ここで紹介するのはそういった場合も変化がわかりやすくなるコードです。

 コードは次で、

// ヘルパー関数的にどこかに置いておく
export const makeRandomColorStyle = () => {
  const getColor = () => Math.floor(Math.random() * 255);
  return {
    color: `rgb(${getColor()},${getColor()},${getColor()})`,
    backgroundColor: `rgb(${getColor()},${getColor()},${getColor()})`,
  };
};

// コンポーネントのスタイルに↑をあてる
<div style={makeRandomColorStyle()}>
{/* 何かコンポーネント本体 */}
</div>

 このコードを使っていた記事が次です。

The Problem with React’s Context API | Strings and Things

 これを使うと次の様にレンダリングが起きるたびに色が大きく変わりやすいです。これによってすごい勢いでレンダリングが起きている場合、目まぐるしく色が変わることでそれを知れます。

  • この記事いいね! (0)