Skip to content

Upgrade to React 19#6067

Open
fatadel wants to merge 1 commit into
firefox-devtools:mainfrom
fatadel:issue-5590
Open

Upgrade to React 19#6067
fatadel wants to merge 1 commit into
firefox-devtools:mainfrom
fatadel:issue-5590

Conversation

@fatadel
Copy link
Copy Markdown
Contributor

@fatadel fatadel commented May 28, 2026

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 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 #5590


Profile

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 requested a review from canova as a code owner May 28, 2026 13:52
@codecov
Copy link
Copy Markdown

codecov Bot commented May 28, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.77%. Comparing base (9faa037) to head (f0e4133).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6067   +/-   ##
=======================================
  Coverage   83.77%   83.77%           
=======================================
  Files         329      329           
  Lines       34547    34549    +2     
  Branches     9667     9669    +2     
=======================================
+ Hits        28943    28945    +2     
  Misses       5175     5175           
  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
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

1 participant