react / react/react

[DevTools Bug]: v6.0.0 (9/26/2024) of devtools makes a page extremely slow in dev (even when devtools are closed)

Open
#31,266 6 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Developer Tools Status: Unconfirmed Type: Bug
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

Website or app

difficult to build a repor for now, since

Repro steps

I'm unsure what's the best way to reproduce the issue, but I'm loading a page with React Router v6 with React@19.0.0-rc-6cf85185-20241014 (using the latest version of the compiler), and v6.0.0 of devtools. Chrome version 129.0.6668.101 (Official Build) (arm64) on MacOS.

Even with devtools closed, page loads become very sluggish in development. If I run a Chrome performance profiler, it completely stalls on opening a new page for 5 seconds (albeit we're not running the React profiler):
Screenshot 2024-10-15 at 15 52 16

When I turn off React Developer tools, page loads become instant when devtools are closed, and Chrome profiler is also 10x faster.

The problem is so bad that we thought we had a memory leak in our app somewhere, but it was all good in the built version of the app. Turns out devtools had updated in the background and everything became sluggish in development as a result. After we disabled the extensions, everything became supper snappy in development again.

Would love to provide a repro, but I'm not exactly sure what conditions trigger the issue, as a barebones react router setup doesn't seem to do the trick.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file, test, or reliable reproduction is provided. Start by comparing page-load performance in a React Router v6 app using React 19.0.0-rc-6cf85185-20241014 with React DevTools v6.0.0 enabled and disabled, using Chrome's performance profiler. Done means identifying reproducible triggering conditions and a confirmed DevTools fix or a narrowly scoped follow-up.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.