Skip to content

Instantly share code, notes, and snippets.

@paulshen
Created July 11, 2019 21:41
Show Gist options
  • Save paulshen/8a10c1ac7cd1b2983219e27a08d0f85b to your computer and use it in GitHub Desktop.
Save paulshen/8a10c1ac7cd1b2983219e27a08d0f85b to your computer and use it in GitHub Desktop.
React nextEffect leak
import React from "react";
// Even though <InnerBody> unmounts (and remounts), this Fiber holds a reference to
// the initial <InnerBody> fiber node.
function Sidebar() {
React.useEffect(() => {
console.log("Sidebar");
});
return <div>Sidebar (look at my nextEffect chain)</div>;
}
// This is necessary because updating <Body> causes <App>
// to reclone its children and reset their nextEffect pointer.
// https://github.com/facebook/react/blob/67e3f3fb6e342f95f00215c84d5d013d7b0e1b33/packages/react-reconciler/src/ReactFiber.js#L418
function SidebarWrapper() {
return <Sidebar />;
}
function InnerBody({ count }) {
React.useEffect(() => {
console.log(`InnerBody: ${count}`);
});
return <div>InnerBody: {count}</div>;
}
function Body() {
const [count, setCount] = React.useState(1);
return (
<div>
<InnerBody count={count} key={count} />
<button onClick={() => setCount(x => x + 1)}>Remount InnerBody</button>
</div>
);
}
export default function App() {
return (
<div>
<SidebarWrapper />
<Body />
</div>
);
}
@thiskevinwang
Copy link

Hey Paul, i'm reading your article https://blog.discordapp.com/discord-react-memory-leak-565c89763e8!

Why does <InnerBody> need a key value?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment