React Profilerを試す

はじめに

ReactのDeveloper Toolでコンポーネント描画のパフォーマンスをパパっと調べたいと思います。

• 結論

React Developer Toolsで比較的簡単に描画パフォーマンスを確認できます。

やったこと

基本的には以下の記事に記載してあることを試しました。

分かりやすくするため、RootLayoutコンポーネントで以下のように重めの処理を追加します。

Rootlayout.jsximport { Suspense, use, useCallback, useState } from "react";

import { Outlet, Link } from "react-router";

// データを表示するコンポーネント
function DisplayData({ promise }) {
  const data = use(promise);
  return <div style={{ marginTop: '10px', color: 'green' }}>{data}</div>;
}

export default function RootLayout() {
  // 1秒かかる非同期関数
const fetchData = useCallback(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("🎉 データ取得成功！");
    }, 1000);
  });
}, []);

  // 💡 Promise自体をStateで管理する
  const [dataPromise, setDataPromise] = useState<Promise<unknown> | null>(null);

  const handleClick = () => {
    setDataPromise(fetchData()); // これでエラーが出なくなります
  };
  return (
    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
      {/* サイドナビゲーション */}
      <nav style={{ borderRight: "1px solid #ccc", paddingRight: "20px" }}>
        <h2>Menu</h2>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/users/1">Users</Link></li>
        </ul>
      </nav>

      <main>
        <div style={{ padding: '20px' }}>
          <button onClick={handleClick}>
            データを読み込む
          </button>

          {/* 💡 Suspenseの境界を作る */}
          {dataPromise && (
            <Suspense fallback={<div>読み込み中...</div>}>
              <DisplayData promise={dataPromise} />
            </Suspense>
          )}
        </div>
        <Outlet />
      </main>
    </div>
  );
}

測定してみると、次のようにSuspenceとRootLayoutで描画に時間がかかっていることが分かります。

次に、先ほどの重めの処理を省いてみます。

RootLayout.jsx

import { Outlet, Link } from "react-router";

export default function RootLayout() {
  return (
    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
      {/* サイドナビゲーション */}
      <nav style={{ borderRight: "1px solid #ccc", paddingRight: "20px" }}>
        <h2>Menu</h2>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/users/1">Users</Link></li>
        </ul>
      </nav>

      <main>
        <Outlet />
      </main>
    </div>
  );
}

すると、次の通りRootLayoutの描画時間も約1ms短縮されたことが確認できました（画面初期表示時から測定したのでRooterProviderが入ってしまってます…）。

まとめ

React Developer Toolsは正直あまり使うタイミングはないのですが、パパっと「何に描画時間が使われているか」を確認するのには良いかもしれません。

「なんか描画もっさりしてない？」と聞かれた際にぜひこのツールを使ってみてください。