Skip to content

React 19 compatible #6860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
Apr 24, 2025
Merged

React 19 compatible #6860

merged 8 commits into from
Apr 24, 2025

Conversation

Wxh16144
Copy link
Member

@Wxh16144 Wxh16144 commented Apr 23, 2025 •
edited
Loading

Motivation

React 19 has been released for a while. There is no plan for a major upgrade at the moment, but some feedback has been received. It's time to perform patch hack code :).

Solution

Like antd v5, it provides the unstableSetRender method, allowing developers to modify ReactDOM rendering method.

read more: https://ant.design/docs/react/v5-for-19#unstablesetrender

It is worth noting that the @ant-design/v5-patch-for-react-19 package is not applicable to antd-mobile.

Monkey patch

Important

Monkey patch, only applicable to the version range antd-mobile@^5.39.1;

 import { unstableSetRender } from 'antd-mobile';
 import { createRoot } from 'react-dom/client';

 unstableSetRender((node, container) => {
   container._reactRoot ||= createRoot(container);
   const root = container._reactRoot;
   root.render(node);
   return async () => {
     await new Promise((resolve) => setTimeout(resolve, 0));
     root.unmount();
   };
 });

Related Issues

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 23, 2025 •
edited
Loading

Preview is ready

@codecov Codecov
Copy link

codecov bot commented Apr 23, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 95.45455% with 1 line in your changes missing coverage. Please review.

Project coverage is 92.75%. Comparing base (c4ffe6e) to head (5624f07).
Report is 1 commits behind head on master.

Files with missing lines Patch % Lines
src/utils/unstable-render.tsx 94.44% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #6860      +/-   ##
==========================================
+ Coverage   92.71%   92.75%   +0.03%     
==========================================
  Files         335      336       +1     
  Lines        7236     7214      -22     
  Branches     1818     1799      -19     
==========================================
- Hits         6709     6691      -18     
+ Misses        491      487       -4     
  Partials       36       36

☔ 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.

@zombieJ zombieJ requested a review from Copilot April 24, 2025 03:05
Copilot
Copilot AI reviewed Apr 24, 2025
View reviewed changes
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR adds React 19 compatibility by introducing a low-level registration method (unstableSetRender) to allow developers to override the default ReactDOM render function. Key changes include:

  • Creating a new unstable-render utility that defines and exposes unstableSetRender and getReactRender.
  • Modifying render-to-body to leverage the new unstableGetReactRender API.
  • Updating documentation and menus to reflect the React 19 compatibility approach.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/utils/unstable-render.tsx New utility offering a hook to override the render
src/utils/render.ts Simplified to re-export rendering utilities
src/utils/render-to-body.ts Updated to use the new unstable render function
src/index.ts Exposes unstableSetRender for external usage
docs/guide/v5-for-19.{zh,en}.md Added documentation for React 19 compatibility
config/menus.tsx Updated menu entries for the new React 19 guide
Comments suppressed due to low confidence (1)

src/utils/unstable-render.tsx:18

  • The warning condition and message may be misleading: it currently warns based on React major version and the existence of 'createRoot'. For React 19, the check should ensure that createRoot is available; consider revising the condition and message to clearly indicate that the override is intended only when using React 19 without createRoot.
warningOnce(majorVersion < 19 || fullKeys.includes('createRoot'), `[Compatible] antd-mobile v5 support React is 16 ~ 18. see https://github.com/ant-design/ant-design-mobile/pull/6860 for compatible.`)

zombieJ
zombieJ reviewed Apr 24, 2025
View reviewed changes
Wxh16144
Wxh16144 commented Apr 24, 2025
View reviewed changes
@zombieJ zombieJ merged commit d3b3bae into ant-design:master Apr 24, 2025
10 checks passed
@zsh1111111111111
Copy link

什么时候发

1 similar comment
@c-ling
Copy link

c-ling commented Apr 27, 2025

什么时候发

@983033995
Copy link

什么时候会发布能兼容react 19的版本

@taniaelysia42
Copy link

when this pr release?

@Wxh16144 Wxh16144 mentioned this pull request May 22, 2025
Merged
@Wxh16144
Copy link
Member Author

It seems there is no recent release plan, and I have added a trial plan. Refer to PR #6872

npm i https://pkg.pr.new/ant-design/ant-design-mobile/antd-mobile@6872

@taniaelysia42
Copy link

thank you @Wxh16144 , i think ant design mobile need to update the react spring

@v1talii-dev
Copy link

When should I expect the 5.39.1 release?

@AlejandroRM-DEV AlejandroRM-DEV mentioned this pull request Jun 26, 2025
Closed
@Layouwen Layouwen mentioned this pull request Jun 27, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@zombieJ zombieJ zombieJ approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@Wxh16144 @zsh1111111111111 @c-ling @983033995 @taniaelysia42 @v1talii-dev @zombieJ