React Scanをさわってみた

ARANK

この記事は Applibot Advent Calendar 2024 7日目の記事です。前回の記事はコチラです。この記事は？普段Reactを用いてWebアプリケーションを開発している上で、Chrome DevToolsやReact Developer Toolsにとてもお世話になっているのですが、さわりはじめの頃は表示されている情報がどのような意味を持った情報かわからず、ツールに慣れるまでそこそこ時間を要していました。もう少し使いやすく、直感的に理解できるツールは無いものかと悩んでいた際に運良く React Scan に出会ったため今回はこれをさわっていこうかと思います。React Scanとは Scanは、Reactアプリ全体のレンダリング状況を可視化することに特化したツールです。同ツールのREADMEにある「Why React Scan?」セクションでも強調されているとおり、Reactのパフォーマンス測定で一般的なChrome DevToolsやReact Developer Toolsは豊富な情報源であり、かつ強力な開発ツールである一方、以下のような課題が残っています。断片的な情報への依存Profilerは「いつ何がどれくらいの時間で描画されたか」を示しますが、「なぜ、そのコンポーネントが再レンダリングされたのか？」を明確に示すには開発者側の推測が必…