fix: React 17 findDOMNode is deprecated

[hosseinmd]

[中文版模板 / Chinese template]
findDOMNode is Deprecated we should use ref.

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

close #22493
ref #26136

💡 Background and solution

Use ref instead of findDOMNode

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[ant-design-bot]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 24c5a31:

Sandbox	Source
antd reproduction template	Configuration

[codecov]

Codecov Report

Merging #27755 (24c5a31) into master (7b9a794) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master    #27755   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          390       390           
  Lines         7387      7393    +6     
  Branches      2042      2044    +2     
=========================================
+ Hits          7387      7393    +6     

Impacted Files	Coverage Δ
components/_util/wave.tsx	100.00% <100.00%> (ø)
components/anchor/Anchor.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7b9a794...24c5a31. Read the comment docs.

[trane294]

Please merge

[goulkreek]

Please Merge. "findDOMNode" warning is really annoying.

[zombieJ]

Could you help to use rc-util func instead?

https://github.com/react-component/util/blob/master/src/ref.ts
https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts

[hosseinmd]

Could you help to use rc-util func instead?

https://github.com/react-component/util/blob/master/src/ref.ts
https://github.com/react-component/util/blob/master/src/Dom/findDOMNode.ts

Done.

[hosseinmd]

used supportRef

[hosseinmd]

I removed setAndForwardRef and used composeRef instead

[goulkreek]

Fixed for me with release 4.8.4 !
Thx a lot !

[ogrotten]

I am receiving this error on 4.9.4 using Upload component. It is the only component in use as I'm just getting started on this project.

My code:

import React, { useState } from 'react';

import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import "antd/dist/antd.css";
import './App.css';

function App() {
	const [fileList, updateFileList] = useState([]);
	const props = {
		fileList,
		beforeUpload: file => {
			if (file.type !== 'application/json') {
				message.error(`${file.name} is not a json file`);
			}
			return file.type === 'application/json';
		},
		onChange: info => {
			console.log(info.fileList);
			// file.status is empty when beforeUpload return false
			updateFileList(info.fileList.filter(file => !!file.status));
		},
	};
	return (
		<div className="App">
			<Upload {...props}>
				<Button icon={<UploadOutlined />}>Upload json only</Button>
			</Upload>
		</div>
	);
}

export default App;

with a very few changes, it is exactly the example from the docs: https://ant.design/components/upload/#components-upload-demo-upload-png-only

The above code results in

Warning: findDOMNode is deprecated in StrictMode.

in the browser console with additional spam.

[casulit]

Still receiving this error @4.10.0

[arocki7]

I still have issues with 4.10.2.

[Ildorado]

Still have the same issue with 4.11.2

[SaadEla]

same issue on :
antd: 4.12
react: 17.0

[yoyo837]

trace in #26136

[seeintea]

Still have the same issue with 4.12.3 and library version 17.0.1 when i used Menu component

[sberequek]

Hi, the problem is still present with antd 4.15.0 and react 17.0.2 when I use the Menu component.

[snxtecnologiabkp]

Hi, any updates?

[codetestmg]

any updates ?
Thanks

[jmaric]

I get same error on Menu component, any update?

[bamtheboozle]

still happens when using the Menu component with 5.3.0

[qinshuze]

2024年了当前是5.16.5版本使用Button组件依旧会出现警告：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

[thomastvedt]

I get this on antd version 5.20.5, looks like it's coming from Tooltip / Popover component.