Skip to content

lib/accept: migrate off ReactDom.render/unmountComponentAtNode (React 19)#111663

Open
taipeicoder wants to merge 1 commit into
trunkfrom
update/react-19-fwd-compat-accept-createroot
Open

lib/accept: migrate off ReactDom.render/unmountComponentAtNode (React 19)#111663
taipeicoder wants to merge 1 commit into
trunkfrom
update/react-19-fwd-compat-accept-createroot

Conversation

@taipeicoder

Copy link
Copy Markdown
Contributor

Part of DOTCOM-17400

Proposed Changes

Migrate the imperative accept() confirm-dialog helper off the React-DOM APIs removed in React 19 (ReactDom.render and unmountComponentAtNode) to the createRoot API from react-dom/client. createRoot is already available in React 18, so this compiles and behaves the same on the current runtime — it's a forward-compatible change ahead of the React 19 bump.

Because createRoot's render and unmount are asynchronous and a root can't be unmounted synchronously while React is still processing the click that closes the dialog, the teardown is deferred to a microtask. The unit test is updated to drive the now-async render/teardown through act().

The public accept() signature is unchanged, so its ~19 callers are unaffected.

Why are these changes being made?

@wordpress/* packages bundled by Calypso are moving to React 19, where these React-DOM APIs no longer exist. Landing the forward-compatible source changes on trunk now keeps the eventual single version bump small and low-risk.

Testing Instructions

  • yarn test-client client/lib/accept — all 4 suites pass.
  • Manually exercise any confirm dialog that uses this helper (e.g. People → remove a viewer/follower, Plugins action dialogs, theme delete, site-ownership transfer): the dialog should open, Cancel/OK should fire the callback with the correct boolean, and the dialog should disappear and clean up its DOM node with no console warnings.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • For UI changes, have you tested the affected components in dark mode?
  • Have you tested accessibility for your changes?
  • Have you used memoizing on expensive computations?
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

🤖 Generated with Claude Code

… 19)

`ReactDom.render`, `ReactDom.hydrate`, and `unmountComponentAtNode` are
removed in React 19. Move the imperative accept() confirm dialog to the
`createRoot` API (`react-dom/client`), which is available in React 18 too,
so this compiles unchanged on the current runtime.

The dialog's onClose runs synchronously from inside its button click
handler, and a root can't be unmounted synchronously while React is still
processing that event, so the teardown is deferred to a microtask.

Update the unit test to drive the now-async render/teardown through act().

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@taipeicoder taipeicoder self-assigned this Jun 14, 2026
@taipeicoder taipeicoder marked this pull request as ready for review June 14, 2026 02:09
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.

1 participant