Skip to content

Commit 8f49e7c

Browse files
eps1loneps1lon
committed
Drop support for string refs
1 parent d13ac0c commit 8f49e7c

33 files changed

+145
-1047
lines changed

‎packages/jest-react/src/JestReact.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,15 @@ export function unstable_toMatchRenderedOutput(root, expectedJSX) {
6363
props: {
6464
children: actualJSXChildren,
6565
},
66-
_owner: null,
6766
_store: __DEV__ ? {} : undefined,
6867
};
68+
69+
Object.defineProperty(actualJSX, '_owner', {
70+
configurable: false,
71+
enumerable: false,
72+
writable: false,
73+
value: null,
74+
});
6975
}
7076
}
7177
} else {
@@ -82,7 +88,7 @@ function jsonChildToJSXChild(jsonChild) {
8288
return jsonChild;
8389
} else {
8490
const jsxChildren = jsonChildrenToJSXChildren(jsonChild.children);
85-
return {
91+
const element = {
8692
$$typeof: REACT_ELEMENT_TYPE,
8793
type: jsonChild.type,
8894
key: null,
@@ -91,9 +97,17 @@ function jsonChildToJSXChild(jsonChild) {
9197
jsxChildren === null
9298
? jsonChild.props
9399
: {...jsonChild.props, children: jsxChildren},
94-
_owner: null,
95100
_store: __DEV__ ? {} : undefined,
96101
};
102+
103+
Object.defineProperty(element, '_owner', {
104+
configurable: false,
105+
enumerable: false,
106+
writable: false,
107+
value: null,
108+
});
109+
110+
return element;
97111
}
98112
}
99113

‎packages/react-client/src/ReactFlightClient.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -379,15 +379,21 @@ function createElement(type, key, props): React$Element<any> {
379379
key: key,
380380
ref: null,
381381
props: props,
382-
383-
// Record the component responsible for creating this element.
384-
_owner: null,
385382
};
386383
if (__DEV__) {
387384
// We don't really need to add any of these but keeping them for good measure.
388385
// Unfortunately, _store is enumerable in jest matchers so for equality to
389386
// work, I need to keep it or make _store non-enumerable in the other file.
390387
element._store = {};
388+
389+
// Record the component responsible for creating this element.
390+
Object.defineProperty(element, '_owner', {
391+
configurable: false,
392+
enumerable: false,
393+
writable: false,
394+
value: null,
395+
});
396+
391397
Object.defineProperty(element._store, 'validated', {
392398
configurable: false,
393399
enumerable: false,

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

Lines changed: 0 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
let React;
1313
let ReactDOM;
1414
let ReactDOMServer;
15-
let ReactFeatureFlags;
1615
let ReactTestUtils;
1716

1817
describe('ReactComponent', () => {
@@ -22,7 +21,6 @@ describe('ReactComponent', () => {
2221
React = require('react');
2322
ReactDOM = require('react-dom');
2423
ReactDOMServer = require('react-dom/server');
25-
ReactFeatureFlags = require('shared/ReactFeatureFlags');
2624
ReactTestUtils = require('react-dom/test-utils');
2725
});
2826

@@ -104,83 +102,6 @@ describe('ReactComponent', () => {
104102
}
105103
});
106104

107-
it('should support string refs on owned components', () => {
108-
const innerObj = {};
109-
const outerObj = {};
110-
111-
class Wrapper extends React.Component {
112-
getObject = () => {
113-
return this.props.object;
114-
};
115-
116-
render() {
117-
return <div>{this.props.children}</div>;
118-
}
119-
}
120-
121-
class Component extends React.Component {
122-
render() {
123-
const inner = <Wrapper object={innerObj} ref="inner" />;
124-
const outer = (
125-
<Wrapper object={outerObj} ref="outer">
126-
{inner}
127-
</Wrapper>
128-
);
129-
return outer;
130-
}
131-
132-
componentDidMount() {
133-
expect(this.refs.inner.getObject()).toEqual(innerObj);
134-
expect(this.refs.outer.getObject()).toEqual(outerObj);
135-
}
136-
}
137-
138-
expect(() => {
139-
ReactTestUtils.renderIntoDocument(<Component />);
140-
}).toErrorDev(
141-
ReactFeatureFlags.warnAboutStringRefs
142-
? [
143-
'Warning: Component "div" contains the string ref "inner". ' +
144-
'Support for string refs will be removed in a future major release. ' +
145-
'We recommend using useRef() or createRef() instead. ' +
146-
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
147-
' in div (at **)\n' +
148-
' in Wrapper (at **)\n' +
149-
' in Component (at **)',
150-
'Warning: Component "Component" contains the string ref "outer". ' +
151-
'Support for string refs will be removed in a future major release. ' +
152-
'We recommend using useRef() or createRef() instead. ' +
153-
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
154-
' in Component (at **)',
155-
]
156-
: [],
157-
);
158-
});
159-
160-
it('should not have string refs on unmounted components', () => {
161-
class Parent extends React.Component {
162-
render() {
163-
return (
164-
<Child>
165-
<div ref="test" />
166-
</Child>
167-
);
168-
}
169-
170-
componentDidMount() {
171-
expect(this.refs && this.refs.test).toEqual(undefined);
172-
}
173-
}
174-
175-
class Child extends React.Component {
176-
render() {
177-
return <div />;
178-
}
179-
}
180-
181-
ReactTestUtils.renderIntoDocument(<Parent child={<span />} />);
182-
});
183-
184105
it('should support callback-style refs', () => {
185106
const innerObj = {};
186107
const outerObj = {};

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

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
1414
let React;
1515
let ReactDOM;
1616
let ReactDOMServer;
17-
let ReactFeatureFlags;
1817
let ReactTestUtils;
1918

2019
function initModules() {
@@ -23,7 +22,6 @@ function initModules() {
2322
React = require('react');
2423
ReactDOM = require('react-dom');
2524
ReactDOMServer = require('react-dom/server');
26-
ReactFeatureFlags = require('shared/ReactFeatureFlags');
2725
ReactTestUtils = require('react-dom/test-utils');
2826

2927
// Make them available to the helpers.
@@ -36,7 +34,6 @@ function initModules() {
3634

3735
const {
3836
resetModules,
39-
asyncReactDOMRender,
4037
clientRenderOnServerString,
4138
expectMarkupMatch,
4239
} = ReactDOMServerIntegrationUtils(initModules);
@@ -80,38 +77,6 @@ describe('ReactDOMServerIntegration', () => {
8077
expect(refElement).not.toBe(null);
8178
expect(refElement).toBe(e);
8279
});
83-
84-
it('should have string refs on client when rendered over server markup', async () => {
85-
class RefsComponent extends React.Component {
86-
render() {
87-
return <div ref="myDiv" />;
88-
}
89-
}
90-
91-
const markup = ReactDOMServer.renderToString(<RefsComponent />);
92-
const root = document.createElement('div');
93-
root.innerHTML = markup;
94-
let component = null;
95-
resetModules();
96-
await expect(async () => {
97-
await asyncReactDOMRender(
98-
<RefsComponent ref={e => (component = e)} />,
99-
root,
100-
true,
101-
);
102-
}).toErrorDev(
103-
ReactFeatureFlags.warnAboutStringRefs
104-
? [
105-
'Warning: Component "RefsComponent" contains the string ref "myDiv". ' +
106-
'Support for string refs will be removed in a future major release. ' +
107-
'We recommend using useRef() or createRef() instead. ' +
108-
'Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref\n' +
109-
' in RefsComponent (at **)',
110-
]
111-
: [],
112-
);
113-
expect(component.refs.myDiv).toBe(root.firstChild);
114-
});
11580
});
11681

11782
it('should forward refs', async () => {

‎packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js

Lines changed: 0 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ let React;
1313
let ReactFeatureFlags;
1414
let ReactNoop;
1515
let Scheduler;
16-
let JSXDEVRuntime;
1716

1817
describe('ReactDeprecationWarnings', () => {
1918
beforeEach(() => {
@@ -22,16 +21,11 @@ describe('ReactDeprecationWarnings', () => {
2221
ReactFeatureFlags = require('shared/ReactFeatureFlags');
2322
ReactNoop = require('react-noop-renderer');
2423
Scheduler = require('scheduler');
25-
if (__DEV__) {
26-
JSXDEVRuntime = require('react/jsx-dev-runtime');
27-
}
2824
ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
29-
ReactFeatureFlags.warnAboutStringRefs = true;
3025
});
3126

3227
afterEach(() => {
3328
ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = false;
34-
ReactFeatureFlags.warnAboutStringRefs = false;
3529
});
3630

3731
it('should warn when given defaultProps', () => {
@@ -50,99 +44,4 @@ describe('ReactDeprecationWarnings', () => {
5044
'release. Use JavaScript default parameters instead.',
5145
);
5246
});
53-
54-
it('should warn when given string refs', () => {
55-
class RefComponent extends React.Component {
56-
render() {
57-
return null;
58-
}
59-
}
60-
class Component extends React.Component {
61-
render() {
62-
return <RefComponent ref="refComponent" />;
63-
}
64-
}
65-
66-
ReactNoop.render(<Component />);
67-
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
68-
'Warning: Component "Component" contains the string ref "refComponent". ' +
69-
'Support for string refs will be removed in a future major release. ' +
70-
'We recommend using useRef() or createRef() instead. ' +
71-
'Learn more about using refs safely here: ' +
72-
'https://reactjs.org/link/strict-mode-string-ref' +
73-
'\n in Component (at **)',
74-
);
75-
});
76-
77-
it('should not warn when owner and self are the same for string refs', () => {
78-
ReactFeatureFlags.warnAboutStringRefs = false;
79-
80-
class RefComponent extends React.Component {
81-
render() {
82-
return null;
83-
}
84-
}
85-
class Component extends React.Component {
86-
render() {
87-
return <RefComponent ref="refComponent" __self={this} />;
88-
}
89-
}
90-
ReactNoop.renderLegacySyncRoot(<Component />);
91-
expect(Scheduler).toFlushWithoutYielding();
92-
});
93-
94-
it('should warn when owner and self are different for string refs', () => {
95-
class RefComponent extends React.Component {
96-
render() {
97-
return null;
98-
}
99-
}
100-
class Component extends React.Component {
101-
render() {
102-
return <RefComponent ref="refComponent" __self={{}} />;
103-
}
104-
}
105-
106-
ReactNoop.render(<Component />);
107-
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
108-
'Warning: Component "Component" contains the string ref "refComponent". ' +
109-
'Support for string refs will be removed in a future major release. ' +
110-
'This case cannot be automatically converted to an arrow function. ' +
111-
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
112-
'Learn more about using refs safely here: ' +
113-
'https://reactjs.org/link/strict-mode-string-ref',
114-
]);
115-
});
116-
117-
if (__DEV__) {
118-
it('should warn when owner and self are different for string refs', () => {
119-
class RefComponent extends React.Component {
120-
render() {
121-
return null;
122-
}
123-
}
124-
class Component extends React.Component {
125-
render() {
126-
return JSXDEVRuntime.jsxDEV(
127-
RefComponent,
128-
{ref: 'refComponent'},
129-
null,
130-
false,
131-
{},
132-
{},
133-
);
134-
}
135-
}
136-
137-
ReactNoop.render(<Component />);
138-
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
139-
'Warning: Component "Component" contains the string ref "refComponent". ' +
140-
'Support for string refs will be removed in a future major release. ' +
141-
'This case cannot be automatically converted to an arrow function. ' +
142-
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
143-
'Learn more about using refs safely here: ' +
144-
'https://reactjs.org/link/strict-mode-string-ref',
145-
);
146-
});
147-
}
14847
});

0 commit comments

Comments
 (0)