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

Jump to bottom

17.0.2 Memory Fixes #22016

Closed
wants to merge 3 commits into from
Closed

17.0.2 Memory Fixes #22016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8319220
clear stateNode
paulshen Aug 2, 2021
f959042
detach fiber from host component
paulshen Aug 2, 2021
67a1cd3
apply to ReactFiberCommitWork.old.js
paulshen Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/react-dom/src/client/ReactDOMComponentTree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,11 @@ import {getParentSuspenseInstance} from './ReactDOMHostConfig';
import invariant from 'shared/invariant';
import {enableScopeAPI} from 'shared/ReactFeatureFlags';

const randomKey = Math.random()
.toString(36)
.slice(2);
// const randomKey = Math.random()
// .toString(36)
// .slice(2);
// HACK: not so random anymore
const randomKey = '';
const internalInstanceKey = '__reactFiber$' + randomKey;
const internalPropsKey = '__reactProps$' + randomKey;
const internalContainerInstanceKey = '__reactContainer$' + randomKey;
Expand Down
49 changes: 34 additions & 15 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1044,7 +1044,7 @@ function commitUnmount(
} while (effect !== firstEffect);
}
}
return;
break;
}
case ClassComponent: {
safelyDetachRef(current, nearestMountedAncestor);
Expand All @@ -1056,11 +1056,28 @@ function commitUnmount(
nearestMountedAncestor,
);
}
return;
break;
}
case HostComponent: {
safelyDetachRef(current, nearestMountedAncestor);
return;
// HACK: detach fiber references from DOM
current.stateNode.__reactFiber$ = null;
current.stateNode.__reactProps$ = null;
current.stateNode.__reactContainer$ = null;
current.stateNode.__reactEvents$ = null;
current.stateNode.__reactListeners$ = null;
current.stateNode.__reactHandles$ = null;
break;
}
case HostText: {
// HACK: detach fiber references from DOM
current.stateNode.__reactFiber$ = null;
current.stateNode.__reactProps$ = null;
current.stateNode.__reactContainer$ = null;
current.stateNode.__reactEvents$ = null;
current.stateNode.__reactListeners$ = null;
current.stateNode.__reactHandles$ = null;
break;
}
case HostPortal: {
// TODO: this is recursive.
Expand All @@ -1076,7 +1093,7 @@ function commitUnmount(
} else if (supportsPersistence) {
emptyPortalContainer(current);
}
return;
break;
}
case FundamentalComponent: {
if (enableFundamentalAPI) {
Expand All @@ -1086,7 +1103,7 @@ function commitUnmount(
current.stateNode = null;
}
}
return;
break;
}
case DehydratedFragment: {
if (enableSuspenseCallback) {
Expand All @@ -1098,15 +1115,21 @@ function commitUnmount(
}
}
}
return;
break;
}
case ScopeComponent: {
if (enableScopeAPI) {
safelyDetachRef(current, nearestMountedAncestor);
}
return;
break;
}
}

// Remove reference for GC
current.stateNode = null;
if (current.alternate != null) {
current.alternate.stateNode = null;
}
}

function commitNestedUnmounts(
Expand Down Expand Up @@ -1460,6 +1483,8 @@ function unmountHostComponents(
}

if (node.tag === HostComponent || node.tag === HostText) {
// Save stateNode reference so commitUnmount can clear it.
const stateNode: Instance | TextInstance = node.stateNode;
commitNestedUnmounts(
finishedRoot,
node,
Expand All @@ -1469,15 +1494,9 @@ function unmountHostComponents(
// After all the children have unmounted, it is now safe to remove the
// node from the tree.
if (currentParentIsContainer) {
removeChildFromContainer(
((currentParent: any): Container),
(node.stateNode: Instance | TextInstance),
);
removeChildFromContainer(((currentParent: any): Container), stateNode);
} else {
removeChild(
((currentParent: any): Instance),
(node.stateNode: Instance | TextInstance),
);
removeChild(((currentParent: any): Instance), stateNode);
}
// Don't visit children because we already visited them.
} else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
Expand Down
49 changes: 34 additions & 15 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -906,19 +906,36 @@ function commitUnmount(
} while (effect !== firstEffect);
}
}
return;
break;
}
case ClassComponent: {
safelyDetachRef(current);
const instance = current.stateNode;
if (typeof instance.componentWillUnmount === 'function') {
safelyCallComponentWillUnmount(current, instance);
}
return;
break;
}
case HostComponent: {
safelyDetachRef(current);
return;
// HACK: detach fiber references from DOM
current.stateNode.__reactFiber$ = null;
current.stateNode.__reactProps$ = null;
current.stateNode.__reactContainer$ = null;
current.stateNode.__reactEvents$ = null;
current.stateNode.__reactListeners$ = null;
current.stateNode.__reactHandles$ = null;
break;
}
case HostText: {
// HACK: detach fiber references from DOM
current.stateNode.__reactFiber$ = null;
current.stateNode.__reactProps$ = null;
current.stateNode.__reactContainer$ = null;
current.stateNode.__reactEvents$ = null;
current.stateNode.__reactListeners$ = null;
current.stateNode.__reactHandles$ = null;
break;
}
case HostPortal: {
// TODO: this is recursive.
Expand All @@ -929,7 +946,7 @@ function commitUnmount(
} else if (supportsPersistence) {
emptyPortalContainer(current);
}
return;
break;
}
case FundamentalComponent: {
if (enableFundamentalAPI) {
Expand All @@ -939,7 +956,7 @@ function commitUnmount(
current.stateNode = null;
}
}
return;
break;
}
case DehydratedFragment: {
if (enableSuspenseCallback) {
Expand All @@ -951,15 +968,21 @@ function commitUnmount(
}
}
}
return;
break;
}
case ScopeComponent: {
if (enableScopeAPI) {
safelyDetachRef(current);
}
return;
break;
}
}

// Remove reference for GC
current.stateNode = null;
if (current.alternate != null) {
current.alternate.stateNode = null;
}
}

function commitNestedUnmounts(
Expand Down Expand Up @@ -1314,19 +1337,15 @@ function unmountHostComponents(
}

if (node.tag === HostComponent || node.tag === HostText) {
// Save stateNode reference so commitUnmount can clear it.
const stateNode: Instance | TextInstance = node.stateNode;
commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
// After all the children have unmounted, it is now safe to remove the
// node from the tree.
if (currentParentIsContainer) {
removeChildFromContainer(
((currentParent: any): Container),
(node.stateNode: Instance | TextInstance),
);
removeChildFromContainer(((currentParent: any): Container), stateNode);
} else {
removeChild(
((currentParent: any): Instance),
(node.stateNode: Instance | TextInstance),
);
removeChild(((currentParent: any): Instance), stateNode);
}
// Don't visit children because we already visited them.
} else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
Expand Down