In react.js, are there any differences between the following two approaches? like in terms of performance etc?

1. <SomeComponent props1={props1} props2={props2} />

2. <SomeComponent { ...{props1, props2} } />

CodePudding user response：

use babel, see result:

const component1 = <SomeComponent props1={props1} props2={props2} />
const component2 = <SomeComponent { ...{props1, props2} } />

"use strict";

const component1 = /*#__PURE__*/React.createElement(SomeComponent, {
  props1: props1,
  props2: props2
});
const component2 = /*#__PURE__*/React.createElement(SomeComponent, {
  props1,
  props2
});

CodePudding user response：

Those two approaches are exactly same in performance. Because spread operator doesn't affect to the performance. I think the second one is the good use case than the first one.