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

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.

[stale[bot]]

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.

[gaearon]

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