Skip to content

Commit 7f9648b

Browse files
committed
Add flag to portalContainer on mount instead of in createPortal
**what is the change?:** We add a flag to the container of a 'portal' in the 'commit work' phase in Fiber. This is right before we call `appendChildToContainer`. **why make this change?:** - Sometimes people call `ReactDOM.render(... container)`, then manually clear the content of the `container`, and then try to call another `ReactDOM.render(... container)`. - This leads to cryptic errors or silent failure because we hold a reference to the node that was rendered the first time, and expect it to still be inside the container. - We added a warning for this issue in `renderSubtreeIntoContainer`, but when a component renders something returned by `ReactDOM.unstable_createPortal(<Component />, portalContainer);`, then the child is inside the `portalContainer` and not the `container, but that is valid and we want to skip warning in that case. Inside `renderSubtreeIntoContainer` we don't have the info to determine if a child was rendered into a `portalContainer` or a `container`, and adding this flag lets us figure that out and skip the warning. We originally added the flag in the call to `ReactDOM.unstable_createPortal` but that seemed like a method that should be "pure" and free of side-effects. This commit moves the flag-adding to happen when we mount the portal component. **test plan:** `yarn test` **issue:** facebook#8854
1 parent c927309 commit 7f9648b

File tree

2 files changed

+4
-2
lines changed

2 files changed

+4
-2
lines changed

src/renderers/shared/fiber/ReactFiberCommitWork.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,10 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
218218
}
219219
} else {
220220
if (isContainer) {
221+
if (parentFiber.tag === HostPortal) {
222+
// allows us to identify the portal container in other places
223+
parent.__reactInternalIsPortalContainer = true;
224+
}
221225
appendChildToContainer(parent, node.stateNode);
222226
} else {
223227
appendChild(parent, node.stateNode);

src/renderers/shared/fiber/isomorphic/ReactPortal.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ exports.createPortal = function(
2727
implementation: any,
2828
key: ?string = null,
2929
): ReactPortal {
30-
// This flag allows us to check if a node was used with a portal
31-
containerInfo.__reactInternalIsPortalContainer = true;
3230
return {
3331
// This tag allow us to uniquely identify this as a React Portal
3432
$$typeof: REACT_PORTAL_TYPE,

0 commit comments

Comments
 (0)