Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move string ref coercion to JSX runtime #28473

Merged
merged 1 commit into from
Apr 5, 2024
Merged

Move string ref coercion to JSX runtime #28473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions packages/react-dom/src/__tests__/ReactComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,9 @@ describe('ReactComponent', () => {
act(() => {
root.render(<div ref="badDiv" />);
}),
).rejects.toThrow(
'Element ref was specified as a string (badDiv) but no owner ' +
'was set',
);
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
).rejects.toThrow();
});

it('should throw (in dev) when children are mutated during render', async () => {
Expand Down Expand Up @@ -169,18 +168,14 @@ describe('ReactComponent', () => {
root.render(<Component />);
});
}).toErrorDev([
'Warning: Component "div" contains the string ref "inner". ' +
'Warning: Component "Component" contains the string ref "inner". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in Wrapper (at **)\n' +
' in div (at **)\n' +
' in Wrapper (at **)\n' +
' in Component (at **)',
'Warning: Component "Component" contains the string ref "outer". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in Component (at **)',
]);
});

Expand Down
1 change: 1 addition & 0 deletions packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ describe('ReactDOMServerIntegration', () => {
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in RefsComponent (at **)',
]);
expect(component.refs.myDiv).toBe(root.firstChild);
Expand Down
9 changes: 1 addition & 8 deletions packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ describe('ReactDeprecationWarnings', () => {
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://react.dev/link/strict-mode-string-ref' +
'\n in RefComponent (at **)' +
'\n in Component (at **)',
);
});
Expand Down Expand Up @@ -137,10 +138,6 @@ describe('ReactDeprecationWarnings', () => {
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://react.dev/link/strict-mode-string-ref',
'Warning: Component "Component" contains the string ref "refComponent". ' +
'Support for string refs will be removed in a future major release. We recommend ' +
'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
'https://react.dev/link/strict-mode-string-ref',
]);
});

Expand Down Expand Up @@ -173,10 +170,6 @@ describe('ReactDeprecationWarnings', () => {
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://react.dev/link/strict-mode-string-ref',
'Warning: Component "Component" contains the string ref "refComponent". ' +
'Support for string refs will be removed in a future major release. We recommend ' +
'using useRef() or createRef() instead. Learn more about using refs safely here: ' +
'https://react.dev/link/strict-mode-string-ref',
]);
});
});
16 changes: 4 additions & 12 deletions packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,18 +185,10 @@ describe('ReactFunctionComponent', () => {
act(() => {
root.render(<Child test="test" />);
}),
).rejects.toThrowError(
__DEV__
? 'Function components cannot have string refs. We recommend using useRef() instead.'
: // It happens because we don't save _owner in production for
// function components.
'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +
' the following reasons:\n' +
'1. You may be adding a ref to a function component\n' +
"2. You may be adding a ref to a component that was not created inside a component's render method\n" +
'3. You have multiple copies of React loaded\n' +
'See https://react.dev/link/refs-must-have-owner for more information.',
);
)
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
.rejects.toThrowError();
});

// @gate !enableRefAsProp || !__DEV__
Expand Down
12 changes: 4 additions & 8 deletions packages/react-dom/src/__tests__/multiple-copies-of-react-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,9 @@ describe('when different React version is used with string ref', () => {
act(() => {
root.render(<TextWithStringRef />);
}),
).rejects.toThrow(
'Element ref was specified as a string (foo) but no owner was set. This could happen for one of' +
' the following reasons:\n' +
'1. You may be adding a ref to a function component\n' +
"2. You may be adding a ref to a component that was not created inside a component's render method\n" +
'3. You have multiple copies of React loaded\n' +
'See https://react.dev/link/refs-must-have-owner for more information.',
);
)
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
.rejects.toThrow();
});
});
73 changes: 30 additions & 43 deletions packages/react-dom/src/__tests__/refs-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,22 +129,22 @@ describe('reactiverefs', () => {
);
});
}).toErrorDev([
'Warning: Component "div" contains the string ref "resetDiv". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in TestRefsComponent (at **)',
'Warning: Component "span" contains the string ref "clickLog0". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in span (at **)\n' +
' in ClickCounter (at **)\n' +
'Warning: Component "TestRefsComponent" contains the string ' +
'ref "resetDiv". Support for string refs will be removed in a ' +
'future major release. We recommend using useRef() or createRef() ' +
'instead. Learn more about using refs safely ' +
'here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in GeneralContainerComponent (at **)\n' +
' in div (at **)\n' +
' in TestRefsComponent (at **)',
'Warning: Component "ClickCounter" contains the string ' +
'ref "clickLog0". Support for string refs will be removed in a ' +
'future major release. We recommend using useRef() or createRef() ' +
'instead. Learn more about using refs safely ' +
'here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in span (at **)\n' +
' in ClickCounter (at **)',
]);

expect(testRefsComponent instanceof TestRefsComponent).toBe(true);
Expand Down Expand Up @@ -352,29 +352,29 @@ describe('ref swapping', () => {
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in A (at **)',
]);
expect(a.refs[1].nodeName).toBe('DIV');
});

// @gate !disableStringRefs
it('provides an error for invalid refs', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<div ref={10} />);
});
}).rejects.toThrow(
'Element ref was specified as a string (10) but no owner was set.',
);
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
}).rejects.toThrow();
await expect(async () => {
await act(() => {
root.render(<div ref={true} />);
});
}).rejects.toThrow(
'Element ref was specified as a string (true) but no owner was set.',
);
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
}).rejects.toThrow();
await expect(async () => {
await act(() => {
root.render(<div ref={Symbol('foo')} />);
Expand Down Expand Up @@ -520,14 +520,10 @@ describe('creating element with string ref in constructor', () => {
await act(() => {
root.render(<RefTest />);
});
}).rejects.toThrowError(
'Element ref was specified as a string (p) but no owner was set. This could happen for one of' +
' the following reasons:\n' +
'1. You may be adding a ref to a function component\n' +
"2. You may be adding a ref to a component that was not created inside a component's render method\n" +
'3. You have multiple copies of React loaded\n' +
'See https://react.dev/link/refs-must-have-owner for more information.',
);
})
// TODO: This throws an AggregateError. Need to update test infra to
// support matching against AggregateError.
.rejects.toThrowError();
});
});

Expand Down Expand Up @@ -581,10 +577,11 @@ describe('strings refs across renderers', () => {
);
});
}).toErrorDev([
'Warning: Component "Indirection" contains the string ref "child1". ' +
'Warning: Component "Parent" contains the string ref "child1". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref\n' +
' in div (at **)\n' +
' in Indirection (at **)\n' +
' in Parent (at **)',
]);
Expand All @@ -593,20 +590,10 @@ describe('strings refs across renderers', () => {
expect(inst.refs.child1.tagName).toBe('DIV');
expect(inst.refs.child1).toBe(div1.firstChild);

await expect(async () => {
// Now both refs should be rendered.
await act(() => {
root.render(<Parent />);
});
}).toErrorDev(
[
'Warning: Component "Root" contains the string ref "child2". ' +
'Support for string refs will be removed in a future major release. ' +
'We recommend using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref',
],
{withoutStack: true},
);
// Now both refs should be rendered.
await act(() => {
root.render(<Parent />);
});
expect(inst.refs.child1.tagName).toBe('DIV');
expect(inst.refs.child1).toBe(div1.firstChild);
expect(inst.refs.child2.tagName).toBe('DIV');
Expand Down
Loading