Is this React prop passing pattern bad for memory?

Question

I've been seeing this pattern for passing props to a component:

<Component { ...{ propToPass, anotherProp } } />

as opposed to:

<Component propToPass={propToPass} anotherProp={anotherProp} />

I was wondering if instantiating an object and immediately spreading the contents could potentially hog memory or if the difference is negligible?

Answer 1

React JSX is usually transformed with Babel, and you can use the Babel playground online to see what it compiles to.

// input
const e1 = <Component { ...{ propToPass, anotherProp } } />

const e2 = <Component propToPass={propToPass} anotherProp={anotherProp} />

// output
"use strict";

var e1 = /*#__PURE__*/React.createElement(Component, {
  propToPass: propToPass,
  anotherProp: anotherProp
});
var e2 = /*#__PURE__*/React.createElement(Component, {
  propToPass: propToPass,
  anotherProp: anotherProp
});

They're the same! So you won't see any difference.