Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
kirbysayshi opened this issue Dec 13, 2024 · 5 comments
Open

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

kirbysayshi opened this issue Dec 13, 2024 · 5 comments
Assignees
@pivanov

Comments

@kirbysayshi
Copy link

Steps to reproduce:

  • visit any site that uses React, such as nytimes.com
  • use the bookmarklet as shown here: Browser Bookmark #32 (comment)
  • 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!
@pivanov pivanov self-assigned this Dec 13, 2024
@pivanov
Copy link
Collaborator

pivanov commented Dec 13, 2024

Hey, thanks!
I can't reproduce it, but I have some ideas about what might be wrong.
I think soon this will be fixed.

@kirbysayshi
Copy link
Author

Great to hear! If it helps, I do have the Redux DevTools and React DevTools extensions installed in Chrome.

I cannot reproduce the issue in an incognito window (where I do not have these extensions installed).

@pivanov
Copy link
Collaborator

pivanov commented Dec 18, 2024

Great to hear! If it helps, I do have the Redux DevTools and React DevTools extensions installed in Chrome.

I cannot reproduce the issue in an incognito window (where I do not have these extensions installed).

Hey @kirbysayshi can you check again?

@kirbysayshi
Copy link
Author

Hi @pivanov! I tried again but ran into these issues (I think):

I'll have to wait until those are fixed in order to attempt another test (I only use react-scan through a bookmarklet so far)

@pivanov
Copy link
Collaborator

pivanov commented Jan 4, 2025

I see ... We are working to fix them!
You can check also CHROME_EXTENSION_GUIDE.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pivanov pivanov

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kirbysayshi @pivanov