@babel/react: useSpread needlessly clones props

Bug Report

• I would like to work on a fix!

Current Behavior Enabling useSpread needlessly clones props:

React.createElement(SomeComponent, { ...props })

With useSpread disabled, you can see that the object is not cloned:

React.createElement(SomeComponent, props)

Input Code

• REPL or Repo link if applicable:

function MyComponent(props) {
  return <SomeComponent {...props} />;
}

I can’t find a toggle for useSpread in the babel REPL. 🤷

Expected behavior/code When a component only has 1 spread object as prop, no other props/second spread, there is no need to clone the object.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.json

{
  "presets": [
    ["@babel/env", {
      "bugfixes": true,
      "corejs": 3,
      "useBuiltIns": "entry"
    }],
    "@babel/typescript",
    ["@babel/react", { "useSpread": true }]
  ],
  "plugins": [
    ["@babel/transform-runtime", { "useESModules": true }],
    "@babel/proposal-class-properties"
  ]
}

Environment

• Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34] ^7.9.4
• Node/npm version: [e.g. Node 8/npm 5] Node 13.12.0/npm 6.14.4
• OS: [e.g. OSX 10.13.4, Windows 10] Win10
• Monorepo: [e.g. yes/no/Lerna] no
• How you are using Babel: [e.g. cli, register, loader] loader

Possible Solution

Avoid extra clonings.

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain. None.

[trueadm]

Cloning the props is an important heuristic here.

It means that the object that gets passed to React’s jsx is a plain mutable object with simple properties; otherwise if you passed in props directly there are no guarantees.

Some of the properties might not be enumerable, or the properties might be getters/setters, or the object might be frozen/sealed (meaning React would have to clone it again if it wanted to mutate the object). By cloning it, we get a snapshot that is final.

[nstepien]

@jridgewell I guess we can reopen and only address the createElement case then.