【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

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