👀

Reactの再レンダリングを視覚的に表示する方法

2023/09/06に公開

TL;DR

このページからReact Developer toolをインストールして設定を加えるとReactの際レンダリングの際にコンポーネントが白い枠で囲まれるエフェクトが画面上に表示されるようになります

https://react.dev/learn/react-developer-tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

まずはComponentsタブの⚙️歯車マークをクリックします

Highlight updates when components render. を✅にします。

あとはdeveloper toolを開いた状態サイトをリロードすることで
以下のように再レンダリングを画面から確認することができました!🎉

小話

このdeveloper toolを使用するとそのサイトで使用されている。技術要素を知ることができます!
https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

X(旧twitter)にもReactが使用されているんですね!

ではまた明日!

Discussion