Skip to content

Upgrade to React 19#6067

Merged
fatadel merged 2 commits into
firefox-devtools:mainfrom
fatadel:issue-5590
Jun 2, 2026
Merged

Upgrade to React 19#6067
fatadel merged 2 commits into
firefox-devtools:mainfrom
fatadel:issue-5590

Conversation

@fatadel

@fatadel fatadel commented May 28, 2026

Copy link
Copy Markdown
Contributor

React 19 narrowed the callback-ref signature to (instance) => void | (() => void), where a returned non-void value is treated as a cleanup function. Several _takeXxxRef handlers were written as (el) => (this._el = el), which implicitly returns the assigned value and no longer satisfies the new type. They now use block bodies so they return undefined.

@types/react v19 also changed React.createRef() to return RefObject<T | null> instead of the legacy split between RefObject and MutableRefObject. MaybeFlameGraph's _flameGraph field declares the new shape directly so the assignment continues to typecheck.

React 19 appends "()" to component-stack frames whose component lacks a source location, so the ErrorBoundary regex now checks that suffix on the NonLocalizedErrorBoundary frame. React 19 also follows the HTML spec for boolean attributes on custom elements (prop={false} drops the attribute entirely); the Home tests mock ListOfPublishedProfiles as a custom-element string, so the affected snapshots no longer carry withactionbuttons="false".

Closes #5590


Profile

@fatadel fatadel requested a review from canova as a code owner May 28, 2026 13:52
@codecov

codecov Bot commented May 28, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.78%. Comparing base (667825c) to head (3cd40d3).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6067   +/-   ##
=======================================
  Coverage   83.78%   83.78%           
=======================================
  Files         329      329           
  Lines       34570    34572    +2     
  Branches     9590     9590           
=======================================
+ Hits        28965    28967    +2     
  Misses       5176     5176           
  Partials      429      429           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fatadel fatadel requested a review from mstange May 28, 2026 13:55

@canova canova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did some manual testing and it looks like everything is working well. Thanks!

Comment thread src/test/components/ErrorBoundary.test.tsx Outdated
React 19 narrowed the callback-ref signature to (instance) => void |
(() => void), where a returned non-void value is treated as a cleanup
function. Several _takeXxxRef handlers were written as
`(el) => (this._el = el)`, which implicitly returns the assigned value
and no longer satisfies the new type. They now use block bodies so
they return undefined.

@types/react v19 also changed React.createRef<T>() to return
RefObject<T | null> instead of the legacy split between RefObject and
MutableRefObject. MaybeFlameGraph's _flameGraph field declares the new
shape directly so the assignment continues to typecheck.

React 19 appends "(<anonymous>)" to component-stack frames whose
component lacks a source location, so the ErrorBoundary regex now
allows that suffix on the NonLocalizedErrorBoundary frame. React 19
also follows the HTML spec for boolean attributes on custom elements
(prop={false} drops the attribute entirely); the Home tests mock
ListOfPublishedProfiles as a custom-element string, so the affected
snapshots no longer carry withactionbuttons="false".

Closes firefox-devtools#5590
@fatadel fatadel enabled auto-merge (squash) June 2, 2026 13:50
@fatadel fatadel merged commit 7a46d0e into firefox-devtools:main Jun 2, 2026
21 checks passed
@fatadel fatadel deleted the issue-5590 branch June 2, 2026 14:32
@canova canova mentioned this pull request Jun 16, 2026
canova added a commit that referenced this pull request Jun 16, 2026
Changes:

[Nazım Can Altınova] Fix call node context menu being hidden behind
source view bottom box (#6045)
[Nazım Can Altınova] Pass `--use-env-proxy` only when the node version
is >= 24 (#6064)
[fatadel] Upgrade @firefox-devtools/react-contextmenu to 5.2.4 (#6066)
[Markus Stange] Switch profiler-edit from minimist to commander (#6065)
[Markus Stange] Support reading profiles from JsonSlabs files (#6037)
[Florian Quèze] Don't fail profile processing when a marker's stack
field is not a backtrace (#6069)
[fatadel] Replace the footer-links overlay with a settings menu (#6042)
[fatadel] Upgrade @types/node to match Node 24 (#6070)
[fatadel] Remove unused undici-types package (#6074)
[cathaysia] Update isLocalURL to include LAN addresses, .local domains,
and hostn… (#5973)
[Markus Stange] Fix from-url with binary profiles (#6072)
[fatadel] Upgrade to React 19 (#6067)
[Markus Stange] Add an insertStackLabels helper. (#6076)
[fatadel] Drive counter tooltips from a tooltipRows schema (#6023)
[fatadel] Add TrackPower--tooltip-average-power-microwatt (#6080)
[Markus Stange] Downgrade to React 19.1 to fix unusable dev build
performance. (#6082)
[Nazım Can Altınova] Add source map symbolication and source view
support (#6018)
[spokodev] fix(FilterNavigatorBar): clip overflow so many breadcrumbs do
not expand the parent (#6085)
[Markus Stange] Move paddings inside the tree header cells. (#6002)
[Markus Stange] Add an --insert-label-frames argument to the
profiler-edit tool (#5966)
[Markus Stange] Stop printing "error: too many arguments" during tests.
(#6088)
[Markus Stange] More additions to profiler-edit, for sp3 profiles
(#6009)
[Nazım Can Altınova] Do not rely on localized texts in the settings menu
tests (#6101)

And special thanks to our localizers:

be: Andrei Mukamolau
de: Ger
de: Michael Köhler
de: Ralf Duehnfahr
el: Jim Spentzos
en-CA: chutten
en-GB: Ian Neal
es-CL: ravmn
fr: Théo Chevalier
fr: wy
fur: Fabio Tomat
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Mark Heijl
ru: Valery Ledovskoy
sr: Марко Костић (Marko Kostić)
sv-SE: Andreas Pettersson
tr: Grk
tr: Selim Şumlu
zh-CN: Olvcpr423
zh-TW: Pin-guang Chen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Upgrade to React 19

2 participants