Skip to content

Commit 8ba0db9

Browse files
sebmarkbagesebmarkbage
committed
Deprecate findDOMNode in StrictMode
There are two scenarios. One is that we pass a component instance that is already in strict mode or the node that we find is in strict mode if an outer component renders into strict mode. I use a separate method findHostInstanceWithWarning for this so that a) I can pass the method name (findDOMNode/findNodeHandle). b) Can ignore this warning in React Native mixins/NativeComponent that use this helper. I don't want to expose the fiber to the renderers themselves.
1 parent 0af8199 commit 8ba0db9

File tree

9 files changed

+345
-11
lines changed

9 files changed

+345
-11
lines changed

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

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
const React = require('react');
1313
const ReactDOM = require('react-dom');
1414
const ReactTestUtils = require('react-dom/test-utils');
15+
const StrictMode = React.StrictMode;
1516

1617
describe('findDOMNode', () => {
1718
it('findDOMNode should return null if passed null', () => {
@@ -94,7 +95,72 @@ describe('findDOMNode', () => {
9495
return <div />;
9596
}
9697
}
97-
9898
expect(() => ReactTestUtils.renderIntoDocument(<Bar />)).not.toThrow();
9999
});
100+
101+
it('findDOMNode should warn if used to find a host component inside StrictMode', () => {
102+
let parent = undefined;
103+
let child = undefined;
104+
105+
class ContainsStrictModeChild extends React.Component {
106+
render() {
107+
return (
108+
<StrictMode>
109+
<div ref={n => (child = n)} />
110+
</StrictMode>
111+
);
112+
}
113+
}
114+
115+
ReactTestUtils.renderIntoDocument(
116+
<ContainsStrictModeChild ref={n => (parent = n)} />,
117+
);
118+
119+
let match;
120+
expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
121+
'Warning: findDOMNode is deprecated in StrictMode. ' +
122+
'findDOMNode was passed an instance of ContainsStrictModeChild which renders a StrictMode subtree. ' +
123+
'The nearest child is in StrictMode. ' +
124+
'Use an explicit ref directly on the element you want to get a handle on.' +
125+
'\n' +
126+
'\n in div (at **)' +
127+
'\n in StrictMode (at **)' +
128+
'\n in ContainsStrictModeChild (at **)' +
129+
'\n' +
130+
'\nLearn more about using refs safely here:' +
131+
'\nhttps://fb.me/react-strict-mode-find-node',
132+
]);
133+
expect(match).toBe(child);
134+
});
135+
136+
it('findDOMNode should warn if passed a component that is inside StrictMode', () => {
137+
let parent = undefined;
138+
let child = undefined;
139+
140+
class IsInStrictMode extends React.Component {
141+
render() {
142+
return <div ref={n => (child = n)} />;
143+
}
144+
}
145+
146+
ReactTestUtils.renderIntoDocument(
147+
<StrictMode>
148+
<IsInStrictMode ref={n => (parent = n)} />
149+
</StrictMode>,
150+
);
151+
152+
let match;
153+
expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([
154+
'Warning: findDOMNode is deprecated in StrictMode. ' +
155+
'findDOMNode was passed an instance of IsInStrictMode which is in a StrictMode subtree. ' +
156+
'Use an explicit ref directly on the element you want to get a handle on.' +
157+
'\n' +
158+
'\n in IsInStrictMode (at **)' +
159+
'\n in StrictMode (at **)' +
160+
'\n' +
161+
'\nLearn more about using refs safely here:' +
162+
'\nhttps://fb.me/react-strict-mode-find-node',
163+
]);
164+
expect(match).toBe(child);
165+
});
100166
});

‎packages/react-dom/src/client/ReactDOM.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -614,7 +614,12 @@ const ReactDOM: Object = {
614614
if ((componentOrElement: any).nodeType === ELEMENT_NODE) {
615615
return (componentOrElement: any);
616616
}
617-
617+
if (__DEV__) {
618+
return DOMRenderer.findHostInstanceWithWarning(
619+
componentOrElement,
620+
'findDOMNode',
621+
);
622+
}
618623
return DOMRenderer.findHostInstance(componentOrElement);
619624
},
620625

‎packages/react-native-renderer/src/ReactFabric.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import warningWithoutStack from 'shared/warningWithoutStack';
2929

3030
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
3131
const findHostInstance = ReactFabricRenderer.findHostInstance;
32+
const findHostInstanceWithWarning =
33+
ReactFabricRenderer.findHostInstanceWithWarning;
3234

3335
function findNodeHandle(componentOrHandle: any): ?number {
3436
if (__DEV__) {
@@ -60,7 +62,16 @@ function findNodeHandle(componentOrHandle: any): ?number {
6062
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
6163
return componentOrHandle.canonical._nativeTag;
6264
}
63-
const hostInstance = findHostInstance(componentOrHandle);
65+
let hostInstance;
66+
if (__DEV__) {
67+
hostInstance = findHostInstanceWithWarning(
68+
componentOrHandle,
69+
'findNodeHandle',
70+
);
71+
} else {
72+
hostInstance = findHostInstance(componentOrHandle);
73+
}
74+
6475
if (hostInstance == null) {
6576
return hostInstance;
6677
}

‎packages/react-native-renderer/src/ReactNativeRenderer.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import warningWithoutStack from 'shared/warningWithoutStack';
3232

3333
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
3434
const findHostInstance = ReactNativeFiberRenderer.findHostInstance;
35+
const findHostInstanceWithWarning =
36+
ReactNativeFiberRenderer.findHostInstanceWithWarning;
3537

3638
function findNodeHandle(componentOrHandle: any): ?number {
3739
if (__DEV__) {
@@ -63,7 +65,16 @@ function findNodeHandle(componentOrHandle: any): ?number {
6365
if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
6466
return componentOrHandle.canonical._nativeTag;
6567
}
66-
const hostInstance = findHostInstance(componentOrHandle);
68+
let hostInstance;
69+
if (__DEV__) {
70+
hostInstance = findHostInstanceWithWarning(
71+
componentOrHandle,
72+
'findNodeHandle',
73+
);
74+
} else {
75+
hostInstance = findHostInstance(componentOrHandle);
76+
}
77+
6778
if (hostInstance == null) {
6879
return hostInstance;
6980
}

‎packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ let ReactFabric;
1515
let createReactNativeComponentClass;
1616
let UIManager;
1717
let FabricUIManager;
18+
let StrictMode;
1819

1920
jest.mock('shared/ReactFeatureFlags', () =>
2021
require('shared/forks/ReactFeatureFlags.native-fabric-oss'),
@@ -25,6 +26,7 @@ describe('ReactFabric', () => {
2526
jest.resetModules();
2627

2728
React = require('react');
29+
StrictMode = React.StrictMode;
2830
ReactFabric = require('react-native-renderer/fabric');
2931
FabricUIManager = require('FabricUIManager');
3032
UIManager = require('UIManager');
@@ -436,4 +438,79 @@ describe('ReactFabric', () => {
436438
// This could change in the future.
437439
expect(touchStart2).toBeCalled();
438440
});
441+
442+
it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
443+
const View = createReactNativeComponentClass('RCTView', () => ({
444+
validAttributes: {foo: true},
445+
uiViewClassName: 'RCTView',
446+
}));
447+
448+
let parent = undefined;
449+
let child = undefined;
450+
451+
class ContainsStrictModeChild extends React.Component {
452+
render() {
453+
return (
454+
<StrictMode>
455+
<View ref={n => (child = n)} />
456+
</StrictMode>
457+
);
458+
}
459+
}
460+
461+
ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
462+
463+
let match;
464+
expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
465+
'Warning: findNodeHandle is deprecated in StrictMode. ' +
466+
'findNodeHandle was passed an instance of ContainsStrictModeChild which renders a StrictMode subtree. ' +
467+
'The nearest child is in StrictMode. ' +
468+
'Use an explicit ref directly on the element you want to get a handle on.' +
469+
'\n' +
470+
'\n in RCTView (at **)' +
471+
'\n in StrictMode (at **)' +
472+
'\n in ContainsStrictModeChild (at **)' +
473+
'\n' +
474+
'\nLearn more about using refs safely here:' +
475+
'\nhttps://fb.me/react-strict-mode-find-node',
476+
]);
477+
expect(match).toBe(child._nativeTag);
478+
});
479+
480+
it('findNodeHandle should warn if passed a component that is inside StrictMode', () => {
481+
const View = createReactNativeComponentClass('RCTView', () => ({
482+
validAttributes: {foo: true},
483+
uiViewClassName: 'RCTView',
484+
}));
485+
486+
let parent = undefined;
487+
let child = undefined;
488+
489+
class IsInStrictMode extends React.Component {
490+
render() {
491+
return <View ref={n => (child = n)} />;
492+
}
493+
}
494+
495+
ReactFabric.render(
496+
<StrictMode>
497+
<IsInStrictMode ref={n => (parent = n)} />
498+
</StrictMode>,
499+
11,
500+
);
501+
502+
let match;
503+
expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([
504+
'Warning: findNodeHandle is deprecated in StrictMode. ' +
505+
'findNodeHandle was passed an instance of IsInStrictMode which is in a StrictMode subtree. ' +
506+
'Use an explicit ref directly on the element you want to get a handle on.' +
507+
'\n' +
508+
'\n in IsInStrictMode (at **)' +
509+
'\n in StrictMode (at **)' +
510+
'\n' +
511+
'\nLearn more about using refs safely here:' +
512+
'\nhttps://fb.me/react-strict-mode-find-node',
513+
]);
514+
expect(match).toBe(child._nativeTag);
515+
});
439516
});

‎packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
'use strict';
1212

1313
let React;
14+
let StrictMode;
1415
let ReactNative;
1516
let createReactNativeComponentClass;
1617
let UIManager;
@@ -20,6 +21,7 @@ describe('ReactNative', () => {
2021
jest.resetModules();
2122

2223
React = require('react');
24+
StrictMode = React.StrictMode;
2325
ReactNative = require('react-native-renderer');
2426
UIManager = require('UIManager');
2527
createReactNativeComponentClass = require('ReactNativeViewConfigRegistry')
@@ -258,4 +260,79 @@ describe('ReactNative', () => {
258260
11,
259261
);
260262
});
263+
264+
it('findNodeHandle should warn if used to find a host component inside StrictMode', () => {
265+
const View = createReactNativeComponentClass('RCTView', () => ({
266+
validAttributes: {foo: true},
267+
uiViewClassName: 'RCTView',
268+
}));
269+
270+
let parent = undefined;
271+
let child = undefined;
272+
273+
class ContainsStrictModeChild extends React.Component {
274+
render() {
275+
return (
276+
<StrictMode>
277+
<View ref={n => (child = n)} />
278+
</StrictMode>
279+
);
280+
}
281+
}
282+
283+
ReactNative.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
284+
285+
let match;
286+
expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
287+
'Warning: findNodeHandle is deprecated in StrictMode. ' +
288+
'findNodeHandle was passed an instance of ContainsStrictModeChild which renders a StrictMode subtree. ' +
289+
'The nearest child is in StrictMode. ' +
290+
'Use an explicit ref directly on the element you want to get a handle on.' +
291+
'\n' +
292+
'\n in RCTView (at **)' +
293+
'\n in StrictMode (at **)' +
294+
'\n in ContainsStrictModeChild (at **)' +
295+
'\n' +
296+
'\nLearn more about using refs safely here:' +
297+
'\nhttps://fb.me/react-strict-mode-find-node',
298+
]);
299+
expect(match).toBe(child._nativeTag);
300+
});
301+
302+
it('findNodeHandle should warn if passed a component that is inside StrictMode', () => {
303+
const View = createReactNativeComponentClass('RCTView', () => ({
304+
validAttributes: {foo: true},
305+
uiViewClassName: 'RCTView',
306+
}));
307+
308+
let parent = undefined;
309+
let child = undefined;
310+
311+
class IsInStrictMode extends React.Component {
312+
render() {
313+
return <View ref={n => (child = n)} />;
314+
}
315+
}
316+
317+
ReactNative.render(
318+
<StrictMode>
319+
<IsInStrictMode ref={n => (parent = n)} />
320+
</StrictMode>,
321+
11,
322+
);
323+
324+
let match;
325+
expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([
326+
'Warning: findNodeHandle is deprecated in StrictMode. ' +
327+
'findNodeHandle was passed an instance of IsInStrictMode which is in a StrictMode subtree. ' +
328+
'Use an explicit ref directly on the element you want to get a handle on.' +
329+
'\n' +
330+
'\n in IsInStrictMode (at **)' +
331+
'\n in StrictMode (at **)' +
332+
'\n' +
333+
'\nLearn more about using refs safely here:' +
334+
'\nhttps://fb.me/react-strict-mode-find-node',
335+
]);
336+
expect(match).toBe(child._nativeTag);
337+
});
261338
});

‎packages/react-noop-renderer/src/createReactNoop.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -522,6 +522,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
522522
if (typeof component.id === 'number') {
523523
return component;
524524
}
525+
if (__DEV__) {
526+
return NoopRenderer.findHostInstanceWithWarning(
527+
component,
528+
'findInstance',
529+
);
530+
}
525531
return NoopRenderer.findHostInstance(component);
526532
},
527533

0 commit comments

Comments
 (0)