logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design of React
  • Changelog
    v5.25.4
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • CSS Variables
      New
    • Use custom date library
    • Internationalization
    • Common Props
    • React 19 Compatibility
      New
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ

React 19 Compatibility

contributors
  • Common PropsV4 to V5

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community
    Compatibility Interface

    antd v5 compatibility with React 16 ~ 18 by default. For React 19, you can use the following compatibility methods to adapt.

    React 19 Compatibility Issues

    Since React 19 adjusted the export method of react-dom, antd cannot directly use the ReactDOM.render method. Therefore, using antd will encounter the following problems:

    • Wave effect does not show
    • Static methods of Modal, Notification, Message not working

    Therefore, you need to use a compatibility configuration to make antd work properly in React 19.

    Compatibility Methods

    You can choose one of the following methods, and it is recommended to use the compatibility package first.

    Compatibility Package

    Install the compatibility package

    npm iconnpm
    yarn iconyarn
    pnpm iconpnpm
    Bun LogoBun
    bash
    npm install @ant-design/v5-patch-for-react-19 --save

    Import the compatibility package at the application entry

    tsx
    import '@ant-design/v5-patch-for-react-19';

    unstableSetRender

    Once again, please use the compatibility package first. Only for special scenarios such as umd, micro-applications, etc., use the unstableSetRender method. unstableSetRender is a low-level registration method that allows developers to modify the rendering method of ReactDOM. Write the following code at the entry of your application:

    js
    import { unstableSetRender } from 'antd';
    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();
    };
    });