Skip to content

Commit 9ad40b1

Browse files
gnoffgnoff
authored
[react-dom] Remove findDOMNode from OSS builds (#28267)
In the next major `findDOMNode` is being removed. This PR removes the API from the react-dom entrypoints for OSS builds and re-exposes the implementation as part of internals. `findDOMNode` is being retained for Meta builds and so all tests that currently use it will continue to do so by accessing it from internals. Once the replacement API ships in an upcoming minor any tests that were using this API incidentally can be updated to use the new API and any tests asserting `findDOMNode`'s behavior directly can stick around until we remove it entirely (once Meta has moved away from it)
1 parent 8436bcc commit 9ad40b1

25 files changed

+114
-73
lines changed

‎packages/react-dom/index.experimental.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export {
1212
createPortal,
1313
createRoot,
1414
hydrateRoot,
15-
findDOMNode,
1615
flushSync,
1716
unstable_batchedUpdates,
1817
unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.

‎packages/react-dom/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export {
1414
createPortal,
1515
createRoot,
1616
hydrateRoot,
17-
findDOMNode,
1817
flushSync,
1918
render,
2019
unmountComponentAtNode,

‎packages/react-dom/index.stable.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export {
1212
createPortal,
1313
createRoot,
1414
hydrateRoot,
15-
findDOMNode,
1615
flushSync,
1716
render,
1817
unmountComponentAtNode,

‎packages/react-dom/src/ReactDOMSharedInternals.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
* @flow
88
*/
99

10+
import type {FindDOMNodeType} from './client/ReactDOMLegacy.js';
1011
import type {HostDispatcher} from './shared/ReactDOMTypes';
1112

1213
type InternalsType = {
@@ -15,6 +16,7 @@ type InternalsType = {
1516
ReactDOMCurrentDispatcher: {
1617
current: HostDispatcher,
1718
},
19+
findDOMNode: null | FindDOMNodeType,
1820
};
1921

2022
function noop() {}
@@ -35,6 +37,7 @@ const Internals: InternalsType = ({
3537
ReactDOMCurrentDispatcher: {
3638
current: DefaultDispatcher,
3739
},
40+
findDOMNode: null,
3841
}: any);
3942

4043
export default Internals;

‎packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ let React;
1515
let ReactDOM;
1616
let ReactDOMClient;
1717
let PropTypes;
18+
let findDOMNode;
1819

1920
const clone = function (o) {
2021
return JSON.parse(JSON.stringify(o));
@@ -95,6 +96,8 @@ describe('ReactComponentLifeCycle', () => {
9596

9697
React = require('react');
9798
ReactDOM = require('react-dom');
99+
findDOMNode =
100+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode;
98101
ReactDOMClient = require('react-dom/client');
99102
PropTypes = require('prop-types');
100103
});
@@ -383,7 +386,7 @@ describe('ReactComponentLifeCycle', () => {
383386
}
384387
render() {
385388
if (this.state.isMounted) {
386-
expect(ReactDOM.findDOMNode(this).tagName).toBe('DIV');
389+
expect(findDOMNode(this).tagName).toBe('DIV');
387390
}
388391
return <div />;
389392
}

‎packages/react-dom/src/__tests__/ReactDOM-test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
let React;
1313
let ReactDOM;
14+
let findDOMNode;
1415
let ReactDOMClient;
1516
let ReactDOMServer;
1617

@@ -21,6 +22,8 @@ describe('ReactDOM', () => {
2122
jest.resetModules();
2223
React = require('react');
2324
ReactDOM = require('react-dom');
25+
findDOMNode =
26+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode;
2427
ReactDOMClient = require('react-dom/client');
2528
ReactDOMServer = require('react-dom/server');
2629

@@ -494,7 +497,7 @@ describe('ReactDOM', () => {
494497
});
495498

496499
const App = () => {
497-
ReactDOM.findDOMNode(instance);
500+
findDOMNode(instance);
498501
return <div />;
499502
};
500503

‎packages/react-dom/src/__tests__/ReactDOMComponent-test.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2121,7 +2121,11 @@ describe('ReactDOMComponent', () => {
21212121

21222122
componentWillUnmount() {
21232123
// Should not throw
2124-
expect(ReactDOM.findDOMNode(this).nodeName).toBe('SPAN');
2124+
expect(
2125+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
2126+
this,
2127+
).nodeName,
2128+
).toBe('SPAN');
21252129
}
21262130
}
21272131

‎packages/react-dom/src/__tests__/ReactDOMEventListener-test.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,18 @@ describe('ReactDOMEventListener', () => {
114114
this.setState({clicked: true});
115115
};
116116
componentDidMount() {
117-
expect(ReactDOM.findDOMNode(this)).toBe(container.firstChild);
117+
expect(
118+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
119+
this,
120+
),
121+
).toBe(container.firstChild);
118122
}
119123
componentDidUpdate() {
120-
expect(ReactDOM.findDOMNode(this)).toBe(container.firstChild);
124+
expect(
125+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
126+
this,
127+
),
128+
).toBe(container.firstChild);
121129
}
122130
render() {
123131
if (this.state.clicked) {

‎packages/react-dom/src/__tests__/ReactDOMLegacyFiber-test.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,10 @@ describe('ReactDOMLegacyFiber', () => {
111111
container,
112112
);
113113

114-
const textNode = ReactDOM.findDOMNode(instance);
114+
const textNode =
115+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
116+
instance,
117+
);
115118
expect(textNode).toBe(container.firstChild);
116119
expect(textNode.nodeType).toBe(3);
117120
expect(textNode.nodeValue).toBe('foo');
@@ -130,7 +133,10 @@ describe('ReactDOMLegacyFiber', () => {
130133

131134
expect(container.childNodes.length).toBe(2);
132135

133-
const firstNode = ReactDOM.findDOMNode(instance);
136+
const firstNode =
137+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
138+
instance,
139+
);
134140
expect(firstNode).toBe(container.firstChild);
135141
expect(firstNode.tagName).toBe('DIV');
136142
});
@@ -159,7 +165,10 @@ describe('ReactDOMLegacyFiber', () => {
159165

160166
expect(container.childNodes.length).toBe(2);
161167

162-
const firstNode = ReactDOM.findDOMNode(instance);
168+
const firstNode =
169+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
170+
instance,
171+
);
163172
expect(firstNode).toBe(container.firstChild);
164173
expect(firstNode.tagName).toBe('DIV');
165174
});
@@ -183,7 +192,10 @@ describe('ReactDOMLegacyFiber', () => {
183192

184193
expect(container.childNodes.length).toBe(2);
185194

186-
const firstNode = ReactDOM.findDOMNode(instance);
195+
const firstNode =
196+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
197+
instance,
198+
);
187199
expect(firstNode).toBe(container.firstChild);
188200
expect(firstNode.tagName).toBe('DIV');
189201
});
@@ -878,13 +890,19 @@ describe('ReactDOMLegacyFiber', () => {
878890
}
879891

880892
const myNodeA = ReactDOM.render(<MyNode />, container);
881-
const a = ReactDOM.findDOMNode(myNodeA);
893+
const a =
894+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
895+
myNodeA,
896+
);
882897
expect(a.tagName).toBe('DIV');
883898

884899
const myNodeB = ReactDOM.render(<MyNode flag={true} />, container);
885900
expect(myNodeA === myNodeB).toBe(true);
886901

887-
const b = ReactDOM.findDOMNode(myNodeB);
902+
const b =
903+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode(
904+
myNodeB,
905+
);
888906
expect(b.tagName).toBe('SPAN');
889907
});
890908

‎packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
let React;
1313
let ReactDOM;
14+
let findDOMNode;
1415
let ReactDOMClient;
1516
let Suspense;
1617
let Scheduler;
@@ -24,6 +25,8 @@ describe('ReactDOMSuspensePlaceholder', () => {
2425
jest.resetModules();
2526
React = require('react');
2627
ReactDOM = require('react-dom');
28+
findDOMNode =
29+
ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.findDOMNode;
2730
ReactDOMClient = require('react-dom/client');
2831
Scheduler = require('scheduler');
2932
act = require('internal-test-utils').act;
@@ -232,11 +235,11 @@ describe('ReactDOMSuspensePlaceholder', () => {
232235
class Child extends React.Component {
233236
componentDidMount() {
234237
log.push('cDM ' + this.props.id);
235-
ReactDOM.findDOMNode(this);
238+
findDOMNode(this);
236239
}
237240
componentDidUpdate() {
238241
log.push('cDU ' + this.props.id);
239-
ReactDOM.findDOMNode(this);
242+
findDOMNode(this);
240243
}
241244
render() {
242245
return 'child';
@@ -291,12 +294,12 @@ describe('ReactDOMSuspensePlaceholder', () => {
291294
class Child extends React.Component {
292295
componentDidMount() {
293296
log.push('cDM');
294-
ReactDOM.findDOMNode(this);
297+
findDOMNode(this);
295298
}
296299

297300
componentDidUpdate() {
298301
log.push('cDU');
299-
ReactDOM.findDOMNode(this);
302+
findDOMNode(this);
300303
}
301304

302305
render() {

0 commit comments

Comments
 (0)