React.cloneElement memory efficiency

Question

Is the originalComponent garbage collected if I have:

const WrapperComponent = ({ originalComponent, ...props }) => {
  const clone = React.cloneElement(originalComponent, props);
  return <div>{clone}</div>;
};

Or does it lead to the duplication of components?

Answer 1

There is no memory inefficiency to using React.cloneElement(). It creates a new React element, using the original as the base. As with all objects, unless a reference is kept to the original element in a variable somewhere, it will get garbage collected and deleted.

To verify this I did a quick test using the Chrome dev tools memory snapshot profiler. Rendering a single component using your WrapperComponent results in only one instance of the cloned component to be in memory.