react-scan icon indicating copy to clipboard operation
react-scan copied to clipboard

Published 20 hours ago • verified publisher icon aidenybai

When focused on a specific component, each rerender causes a new <style> tag to be added to the <head>

Open kirbysayshi opened this issue 2 months ago • 5 comments

Steps to reproduce:

  • visit any site that uses React, such as nytimes.com
  • use the bookmarklet as shown here: https://github.com/aidenybai/react-scan/issues/32#issue-2685770971
  • click the focus icon and choose any element on the page
  • open up the devtools
  • scroll the page to trigger any sort of rerender
  • observe that in addition to flashes of purple denoting rerenders, there are also 10-100s of <style> tags added to the <head>, all with the same react-scan content (see screenshot).
image

For any sort of realtime app that re-renders constantly, this makes react-scan fairly unusable, as it prevents the > details from being expanded, unfortunately!

Either way, this is a super cool project and something sorely needed for those of us profiling realtime react applications!

kirbysayshi avatar Dec 13 '24 21:12 kirbysayshi