[DevTools] Fix high CPU usage on pages without React (#35515)

[everettbu]

Mirror of facebook/react#35516
Original author: CarlosEduJs

---

Summary

• Fixes high CPU usage in React DevTools when browsing pages without React (e.g., Google Search results).

• Motivation: The content script was polling indefinitely with setInterval, sending "hello" messages every 500ms to detect React. On pages without React, this loop never stopped, causing high CPU usage and battery drain.

• Solution: Added a maximum retry limit of 10 attempts (~5 seconds). After this timeout, the polling stops automatically on pages without React, while still allowing enough time for slow-loading React apps to initialize.

How did you test this change?

Manual Testing

Built and tested the extension on both Chrome and Firefox:

• Chrome:

  • Built extension: yarn build:chrome:local
  • Loaded unpacked extension in chrome://extensions/
  • Tested on Google Search (non-React page)
  • Monitored messages in DevTools Console

• Firefox:

  • Built extension: yarn build:firefox:local
  • Loaded temporary add-on in about:debugging
  • Tested on Google Search (non-React page)
  • Monitored messages in DevTools Console

Results

Before fix:

• 100+ "hello" messages sent continuously
• High CPU usage reported by users

After fix:

• Stops after 7-10 messages (~5 seconds)
• No more infinite polling
• React pages (react.dev) still work correctly
• Code Quality Checks
• yarn prettier - Passed
• yarn linc - Passed (lint for changed files)
• yarn flow dom-node - Passed

Screenshot:

Checklist

• Fork the repository and create branch from main
• Run yarn in the repository root
• Code formatted with prettier (yarn prettier)
• Code lints (yarn linc)
• Flow type checks pass (yarn flow dom-node)
• Tested manually on Chrome and Firefox

Related Issue

• Fixes #35515

[greptile-apps]

Greptile Summary

Replaced CPU-intensive polling with an event-driven handshake between the content script and backend manager. The backend manager now signals readiness via a data attribute and custom event, eliminating the 500ms polling loop that caused high CPU usage on non-React pages.

• Successfully addresses the reported issue of high CPU usage and battery drain
• Implements proper race condition handling via attribute check before event listener setup
• Well-tested across Chrome and Firefox environments

Confidence Score: 4/5

• This PR is safe to merge with low risk
• Score reflects a well-tested solution to a specific performance issue. The event-driven approach is architecturally sound with proper race condition handling. One minor resource cleanup concern in edge cases, but the fix is a significant improvement over the original polling mechanism.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react-devtools-extensions/src/contentScripts/proxy.js	Replaced polling with event-driven approach, but event listener cleanup is missing for pages without React
packages/react-devtools-extensions/src/contentScripts/backendManager.js	Added event dispatch and data attribute to signal backend readiness

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: The react-devtools-ready event listener is never cleaned up on pages without React. When backendManager.js is not injected (non-React pages), onBackendReady never fires, so the listener removal on line 28 never executes. This creates a memory leak across page navigations.

Add cleanup in the pagehide handler:

window.addEventListener('pagehide', function ({target}) {
  if (target !== window.document) {
    return;
  }

  window.removeEventListener('react-devtools-ready', onBackendReady);
  delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
});

Did you test navigating between non-React pages to verify the listener cleanup behavior?

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/contentScripts/proxy.js
Line: 27:36

Comment:
**logic:** The `react-devtools-ready` event listener is never cleaned up on pages without React. When `backendManager.js` is not injected (non-React pages), `onBackendReady` never fires, so the listener removal on line 28 never executes. This creates a memory leak across page navigations.

Add cleanup in the `pagehide` handler:

```
window.addEventListener('pagehide', function ({target}) {
  if (target !== window.document) {
    return;
  }

  window.removeEventListener('react-devtools-ready', onBackendReady);
  delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
});
```

 Did you test navigating between non-React pages to verify the listener cleanup behavior?

How can I resolve this? If you propose a fix, please make it concise.

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!