Skip to content

Detect React roots created by createRoot #14682

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

Closed
wants to merge 2 commits into from
Closed

Detect React roots created by createRoot #14682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adf0948
Detect React roots created by createRoot
philipp-spiess Jan 24, 2019
6276099
Increase Coverage
philipp-spiess Jan 24, 2019
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
33 changes: 32 additions & 1 deletion packages/react-dom/src/__tests__/ReactDOMComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2677,6 +2677,23 @@ describe('ReactDOMComponent', () => {
const container = document.createElement('div');
const portalContainer = document.createElement('div');

function Component() {
return ReactDOM.createPortal(
<div onClick={() => {}} />,
portalContainer,
);
}
const root = ReactDOM.unstable_createRoot(container);
root.render(<Component />);
jest.runAllTimers();

expect(typeof portalContainer.onclick).toBe('function');
});

it('adds onclick handler to a portal root mounted via a legacy React root', () => {
const container = document.createElement('div');
const portalContainer = document.createElement('div');

function Component() {
return ReactDOM.createPortal(
<div onClick={() => {}} />,
Expand All @@ -2688,7 +2705,21 @@ describe('ReactDOMComponent', () => {
expect(typeof portalContainer.onclick).toBe('function');
});

it('does not add onclick handler to the React root', () => {
it('does not add onclick handler to a React root', () => {
const container = document.createElement('div');

function Component() {
return <div onClick={() => {}} />;
}

const root = ReactDOM.unstable_createRoot(container);
root.render(<Component />);
jest.runAllTimers();

expect(typeof container.onclick).not.toBe('function');
});

it('does not add onclick handler to a legacy React root', () => {
const container = document.createElement('div');

function Component() {
Expand Down
12 changes: 6 additions & 6 deletions packages/react-dom/src/client/ReactDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,11 +159,11 @@ setRestoreImplementation(restoreControlledState);
export type DOMContainer =
| (Element & {
_reactRootContainer: ?Root,
_reactHasBeenPassedToCreateRootDEV: ?boolean,
_reactHasBeenPassedToCreateRoot: ?boolean,
})
| (Document & {
_reactRootContainer: ?Root,
_reactHasBeenPassedToCreateRootDEV: ?boolean,
_reactHasBeenPassedToCreateRoot: ?boolean,
});

type Batch = FiberRootBatch & {
Expand Down Expand Up @@ -653,7 +653,7 @@ const ReactDOM: Object = {
);
if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.hydrate() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. ' +
'Did you mean to call root.render(element, {hydrate: true})?',
Expand Down Expand Up @@ -681,7 +681,7 @@ const ReactDOM: Object = {
);
if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.render() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. ' +
'Did you mean to call root.render(element)?',
Expand Down Expand Up @@ -728,7 +728,7 @@ const ReactDOM: Object = {

if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?',
enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
Expand Down Expand Up @@ -846,8 +846,8 @@ function createRoot(container: DOMContainer, options?: RootOptions): ReactRoot {
'passed to ReactDOM.render(). This is not supported.',
enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
);
container._reactHasBeenPassedToCreateRootDEV = true;
}
container._reactHasBeenPassedToCreateRoot = true;
const hydrate = options != null && options.hydrate === true;
return new ReactRoot(container, true, hydrate);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,8 +379,11 @@ export function appendChildToContainer(
// defined.
// https://github.com/facebook/react/issues/11918
const reactRootContainer = container._reactRootContainer;
const hasBeenPassedToCreateRoot = container._reactHasBeenPassedToCreateRoot;
if (
(reactRootContainer === null || reactRootContainer === undefined) &&
(hasBeenPassedToCreateRoot === null ||
hasBeenPassedToCreateRoot === undefined) &&
parentNode.onclick === null
) {
// TODO: This cast may not be sound for SVG, MathML or custom elements.
Expand Down
12 changes: 6 additions & 6 deletions packages/react-dom/src/fire/ReactFire.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,11 +164,11 @@ setRestoreImplementation(restoreControlledState);
export type DOMContainer =
| (Element & {
_reactRootContainer: ?Root,
_reactHasBeenPassedToCreateRootDEV: ?boolean,
_reactHasBeenPassedToCreateRoot: ?boolean,
})
| (Document & {
_reactRootContainer: ?Root,
_reactHasBeenPassedToCreateRootDEV: ?boolean,
_reactHasBeenPassedToCreateRoot: ?boolean,
});

type Batch = FiberRootBatch & {
Expand Down Expand Up @@ -658,7 +658,7 @@ const ReactDOM: Object = {
);
if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.hydrate() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. ' +
'Did you mean to call root.render(element, {hydrate: true})?',
Expand Down Expand Up @@ -686,7 +686,7 @@ const ReactDOM: Object = {
);
if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.render() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. ' +
'Did you mean to call root.render(element)?',
Expand Down Expand Up @@ -733,7 +733,7 @@ const ReactDOM: Object = {

if (__DEV__) {
warningWithoutStack(
!container._reactHasBeenPassedToCreateRootDEV,
!container._reactHasBeenPassedToCreateRoot,
'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?',
enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
Expand Down Expand Up @@ -851,8 +851,8 @@ function createRoot(container: DOMContainer, options?: RootOptions): ReactRoot {
'passed to ReactDOM.render(). This is not supported.',
enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot',
);
container._reactHasBeenPassedToCreateRootDEV = true;
}
container._reactHasBeenPassedToCreateRoot = true;
const hydrate = options != null && options.hydrate === true;
return new ReactRoot(container, true, hydrate);
}
Expand Down