⚠️ Some components throw findDOMNode is deprecated and will be removed in React 18.3 / 19

[afc163]

Related links:

• https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode
• facebook/react@c3b2839

Components to fix

• Menu: 在使用React 18.3.0 或者React 19 Beta版本时, Menu组件都会报findDOMNode is deprecated and will be removed错误 #48646
• Tooltip / Select: Tooltip 嵌套 Select使用 严格模式下报错：Warning: findDOMNode is deprecated in StrictMode. #48565
• Dropdown: [Dropdown Tree] Warning: findDOMNode is deprecated in StrictMode #42926
• Dropdown / Form: Dropdown on Form.Item in React.StrickMode gives warning "findDOMNode is deprecated in StrictMode" #46113
• FloatButton: FloatButton 最新版本 (5.12.1) 依然报console warning #46326
• Input: Input 组件在 React 严格模式下报错： findDOMNode is deprecated in StrictMode #42994
• Anchor: Anchor component inside Affix component throws "findDOMNode is deprecated in StrictMode" #48812

[github-actions]

Hello @afc163. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @afc163，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[1yasa]

Button组件在最近的react experimental中报legacyRender错误（点击即报错），这个错误似乎来自于rc-util。

https://github.com/react-component/util/blob/b2016407b7b14353f7b209d8a37df875f0dd0f11/src/React/render.ts#L17

这种写法会存在版本问题（现在react的一些dom方法从react-dom/client导入）。

[bombillazo]

I can confirm this is happening to us as well

[shamseer-ahammed]

+1

[Rising-Pstar]

+1

[Soskxkakr]

+1

[jesse996]

+10086

[wanpan11]

#48809

[ppjjzz]

react-dom/client

Button组件在最近的react experimental中报legacyRender错误（点击即报错），这个错误似乎来自于rc-util。

https://github.com/react-component/util/blob/b2016407b7b14353f7b209d8a37df875f0dd0f11/src/React/render.ts#L17

这种写法会存在版本问题（现在react的一些dom方法从react-dom/client导入）。

这个会导致一些antd组件无法在react 19下使用，例如message

[p-a]

+1

[osherasfa]

+1111

[xiaoxustudio]

+1

[pqhuy98]

+1

[zhouccccc]

any update?

[tahafatih]

+1

[0fan]

官方有计划修复吗

[vtur]

+1

[ppjjzz]

升级到5.17.2版本后使用 Menu 组件还是会报这个警告

[hiql]

这个问题依久很多😮‍💨

react-dom.development.js:86
Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at SingleObserver (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:1731:24)
at ResizeObserver3 (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:1808:24)
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:21861:34
at Tooltip2 (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:27092:32)
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:27734:16
at MenuItem2 (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:31294:5)
at div
at InheritableContextProvider (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:29565:23)
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:30705:43
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:32537:29
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:32652:45
at div
at aside
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:31079:16
at div
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:63544:16
at Layout
at main
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:63525:16
at Content
at div
at http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:63544:16
at Layout
at NotesPage (http://localhost:7718/app/routes/app.tsx:118:16)
at RenderedRoute (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:404:5)
at Outlet (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:738:26)
at App
at LocaleProvider (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:4192:13)
at MotionWrapper (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:7577:5)
at ProviderChildren (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:7687:5)
at ConfigProvider (http://localhost:7718/node_modules/.vite/deps/antd.js?v=515c6aff:7959:27)
at body
at html
at Layout (http://localhost:7718/app/root.tsx:18:3)
at RenderedRoute (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:404:5)
at RenderErrorBoundary (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:364:5)
at DataRoutes (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:1393:5)
at Router (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:745:15)
at RouterProvider (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:1210:5)
at RemixErrorBoundary (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:3455:5)
at RemixBrowser (http://localhost:7718/node_modules/.vite/deps/@remix-run_react.js?v=515c6aff:4112:46)

[MadCcc]

Please provide reproduce and exactly which component will have this error.

[yoyo837]

Similar to #48646

[wanpan11]

This may be one of the issues

• CSSMotion useStatus 调用 getDomElement 需要增加元素是否已卸载判断，目前有几率报错 findDOMNode react-component/motion#50

[ppjjzz]

能否在4.x版本也修复这个问题？

[wanpan11]

能否在4.x版本也修复这个问题？

锁定 react 版本 18,2.0 就行了 4.x停止维护了

[shanmugarajbe]

Please include the following components too

• Tour

[raulmarindev]

So, if I understand this right, every component from the react-component library that uses findDOMNode is affected, correct?

https://github.com/search?q=org%3Areact-component+findDOMNode&type=code

[yoyo837]

There are some fixes in #48958.

[bombillazo]

There are some fixes in #48958.

Hopefully, they will be released soon!

[bombillazo]

5.17.3 was released! Hopefully this is fixed

[loqbudokai3]

5.17.3 was released! Hopefully this is fixed

While it did fix for a lot of components, still happens on my end, using the Select component.

Edit.: Upon further inspection, it's not on the select, It's on the Tooltip component, I just had a function on my code that showed a tooltip depending on the value of another select, like so:

//Custom Select I made that does some datafetch from the backend to get the items, otherwise, basically the same.
                                    <SelectModel 
                                        allowClear={false}
                                        showSearch={false}
                                        name="select_model"
                                        model={modelSelect}
                                        value={valueSelected}
                                        onChange={e => setValueSelected(e)}
                                    />
                                    {valueSelected ? <>
                                        <Tooltip title="Edit the Model">
                                            <MyCustomModal />
                                        </Tooltip>
                                        ... rest of stuff

So the Tooltip triggers the warning

[bryanltrang]

fixed for me using 5.17.3!

[zombieJ]

@loqbudokai3, pls feel free to create new issue with reproduce that we can track the problem : )

[tim-richter]

Also fixed for us in 5.17.3.

Just as a heads up for people getting the warning anyway: Antd will still fallback to findDOMNode, if you don't forward the ref correctly to your custom components. You need to pass the ref to the child of Tooltip for example. Same with Popover etc.

Might be worth to completely remove this fallback behavior, when React 19 is production ready, but for now that's the behavior that I noticed for some components.

[AariefMohideen]

+1
Using with 5.17.3 but still getting warning. React version: 18.3.*

[zhe-he]

+1
Using with 5.17.4 but still getting warning. React version: 18.3.*

[gaspire]

+1

[yoyo837]

issue reproduction, please.