React Developer ToolsのHighlight機能にはバグがあるので注意

React Developer Toolsとは
コンポーネントの再レンダリング検出方法
React Developer Toolsのハイライトのバグ

React Developer Toolsとは

React Developer ToolsはReactをデバッグするための公式ツールで、主に以下の5つの機能があります。

コンポーネントの再レンダリング検出
コンポーネントの階層構造を表示
コンポーネントのpropsやstateを確認・変更
パフォーマンスプロファイリング
React hookのデバッグ

この機能の中で一番使用されている機能は「コンポーネントの再レンダリング検出」です。

Reactはコンポーネントが更新されたときに再レンダリングを行いますが、すべての再レンダリングが必要とは限りません。

例えば、あるコンポーネントの状態やpropsが変わらないにもかかわらず再レンダリングが発生すると、CPUリソースが無駄に消費され、動作が重くなります。

そのため、Reactを使用してWebパフォーマンスの良いWebサイトやWebアプリを制作する人は、必ずと言って良いほどReact Developer Toolsで無駄な再レンダリングがないかチェックしています。

React Developer Toolsはブラウザ拡張機能をインストールすれば使用可能です。

React Developer Tools

Chromeの場合は拡張機能をインストールすると「Reactが読み込まれているWebページ」でデベロッパーツールを開くと、一番右のほうに⚛️Componentsと⚛️Profilerが追加されていることが確認できます。

※ 表示されていない場合は一番右の >> をクリックしてください。

コンポーネントの再レンダリング検出方法

React Developer Toolsで再レンダリングを確認するには、⚛️Componentsを開いて、⚙️歯車アイコンを押して、「Highlight updates when components render.」に✅チェックを入れます。

そして、カウンターなどのボタンを押して「再レンダリング」が発生すると、コンポーネント部分の外側がハイライト表示されます。

作成したサンプルのコードは以下のようになっています。

App.tsx

import { useState } from 'react'
import './App.css'
import CurrentDate from './CurrentDate'

function App() {
  console.log('💻 App render')
  const [count, setCount] = useState(0)
  const [date, setDate] = useState<string>('')

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <button onClick={() => setDate(new Date().toLocaleString())}>
          現在の日時を表示
        </button>
      </div>
      <CurrentDate date={date} />
    </>
  )
}

export default App

CurrentDate.tsx

type Props = {
  date: string
}

function CurrentDate({ date }: Props) {
  console.log('🕔 CurrentDate render')

  return (
    <div>
      <h2>現在の日時: {date}</h2>
    </div>
  )
}

export default CurrentDate

React 再レンダリング確認用サンプル（修正前）

StackBlitzの右上にあるプレビューアイコンからWebページを開いてConsoleを確認してみてください。

countボタンを押したときも「🕔 CurrentDate render」が表示されているため、無駄に再レンダリングされていることが確認できます。

※ ちなみに2回連続で表示されるのはReactのStrict Modeの影響です。

これは「memo」をインポートして、CurrentDateをメモ化することで解消できます。

TSX

import { memo } from 'react'

type Props = {
  date: string
}

function CurrentDate({ date }: Props) {
  console.log('🕔 CurrentDate render')

  return (
    <div>
      <h2>現在の日時: {date}</h2>
    </div>
  )
}

export default memo(CurrentDate)