Coder Social home page Coder Social logo

Comments (12)

hoxyq avatar hoxyq commented on April 25, 2024 4

Thanks for reporting this and recording a demo, I will try to triage this early next week, hopefully shipping a fix soon.
If someone is already triaging this, feel free to open a PR and mentioning this issue.

from react.

pwbriggs avatar pwbriggs commented on April 25, 2024 2

This was in incognito mode without any other extensions enabled

Just wondering, how'd you install React DevTools in incognito?

from react.

braeden avatar braeden commented on April 25, 2024 2

Also cannot reproduce anymore 😬 (same chrome version as @hoxyq ).

I'm slightly concerned that this might reappear unless we can pinpoint the Chromium commit that might have changed the behavior here...

from react.

braeden avatar braeden commented on April 25, 2024 1

This was in incognito mode without any other extensions enabled

Just wondering, how'd you install React DevTools in incognito?

There's an Allow in Incognito switch in the Details of any Chrome extension.

image

from react.

pwbriggs avatar pwbriggs commented on April 25, 2024

I see, thanks.

from react.

mkdynamic avatar mkdynamic commented on April 25, 2024

I see similar behavior when the React Dev Tools is enabled, across all sites. Looking at the heap snapshots, you can see the previous window objects retained and accumulate on every reload. Maybe the Dev Tools is hanging on to a reference for every window object?

from react.

hoxyq avatar hoxyq commented on April 25, 2024

Attempted to triage this, noticed that the required condition for this to happen is chrome.devtools.network.onNavigated listeners here:

chrome.devtools.network.onNavigated.addListener(syncSavedPreferences);

chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener);

Removing both of them fixes the issue.

Having at least one of them still reproduces the memory leak, which is surprising, given the fact that the first one (syncSavedPreferences) is only using chrome.devtools.inspectedWindow.eval:

// The renderer interface can't read saved component filters directly,
// because they are stored in localStorage within the context of the extension.
// Instead it relies on the extension to pass filters through.
function syncSavedPreferences() {
chrome.devtools.inspectedWindow.eval(
`window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
getAppendComponentStack(),
)};
window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
getBreakOnConsoleErrors(),
)};
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
getSavedComponentFilters(),
)};
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
getShowInlineWarningsAndErrors(),
)};
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
getHideConsoleLogsInStrictMode(),
)};
window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
getBrowserTheme(),
)};`,
);
}

Few ideas:

  1. I don't have the time right now, but maybe its worth trying to create a small reproducible example of an extension, which uses both chrome.devtools.network.onNavigated and chrome.devtools.inspectedWindow.eval, which has the same memory leak issues?
  2. Does this memory leak happen in Firefox as well?

from react.

chrishoage avatar chrishoage commented on April 25, 2024

Does this memory leak happen in Firefox as well?

I believe it does, yes. Today I noticed excessive memory usage in Firefox. I opened about:processes and saw "Extensions" using 5GB of memory.

One by one I turned off my extensions (not many, just 4) and watched the report on the memory usage for extensions.

Once I turned off "React Developer Tools" the memory usage for the "Extensions" line in about:processes went from over 5GB down to 600MB.

While I admit this anecdote isn't conclusive proof I think it serves as evidence that it could happen in firefox as well.

from react.

jryans avatar jryans commented on April 25, 2024

Similar to @chrishoage, I have also observed this memory leak in Firefox in the form of high memory usage (though I saw it in happening in a React-using content process) which seemed to go away after disabling this extension.

from react.

hoxyq avatar hoxyq commented on April 25, 2024

I am currently exploring an option to switch from chrome.devtools.inspectedWindow.eval to chrome.scripting.executeScript.

The main problem for us with this approach is the requirement for executing scripts in MAIN world, which Firefox doesn't support yet.

from react.

WizardAlice avatar WizardAlice commented on April 25, 2024

It took me a whole Friday afternoon to finally find the issue came from this plugin.

from react.

hoxyq avatar hoxyq commented on April 25, 2024

My Chrome got updated, and I can't reproduce this on Chrome v122.0.6261.69, can someone confirm this as well?

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.