Unexpected copies of the props object retained in memory with the new hooks API

[localvoid]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

function useCustomHook1() {
  useEffect(() => {
    console.log("mounted");
    return () => {
      console.log("unmounted");
    };
  }, []);
}

function Test3(props) {
  useCustomHook1();
  useEffect(() => {
    console.log(props.test);
  });

  return <div onClick={() => console.log(props.test)}>{props.items.length}</div>;
}

props object that were used when component was rendered for the first time is kept alive. Completely unexpected behavior even when developer understands closure context sharing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/lz61v39r7

• Select test 3
• Click on the button "Create New Array" 5 times
• Take memory snapshot in the developer tools
• Inspect (array) objects
• There will be 4 arrays retained in memory t0, t-2, t-1, t

What is the expected behavior?

Should be 2 arrays retained in memory t-1, t.

[gaearon]

I wonder if this could be the same issue as #13702 (comment). Do you mind looking at what retains the references?

[localvoid]

It is a similar issue, I just thought that t-1 retained state is an expected behavior in React. useEffect makes it even worse and now we have t-2 retained in memory. And if we also add a conditionally firing effect with a cleanup function(even inside of a custom hook) it will retain in memory closure context of a render function that was created when conditionally firing effect were fired.

[localvoid]

Here is another CodeSandbox example that clearly shows that deeply nested component trees(t-2, t-1, t) and closure contexts (t0, t-2, t-1, t) are retained.

[Fabbok1x]

Has this been fixed? Seem to experience the same issue with react 4.3.0.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[brainkim]

Would be interested to see if/when this issue resolved without it being resolved.

[Fabbok1x]

@brainkim This was closed at the same time: #15157

[gaearon]

Does this still reproduce with React 18? We've made some memory-related changes there.

[DCardenas]

I am experiencing this issue currently. I was so confused as to why my messages were sending multiple times.