React Constant Element transformation support

[SukkaW]

Describe the feature

This plugin can speed up reconciliation and reduce garbage collection pressure by hoisting React elements to the highest possible scope, preventing multiple unnecessary re-instantiations.

• https://babeljs.io/docs/babel-plugin-transform-react-constant-elements
• Optimizing Compiler: Reuse Constant Value Types like ReactElement facebook/react#3226
• https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-react-constant-elements

Babel plugin or link to the feature description

https://babeljs.io/docs/babel-plugin-transform-react-constant-elements

Additional context

// In
const Hr = () => {
  return <hr className="hr" />;
};

const WithChildren = (props) => {
  return <div className={props.className}>
    <hr />
  </div>;
}

// Out
var _hr, _hr2;

const Hr = () => {
  return _hr || (_hr = <hr className="hr" />);
};

const WithChildren = (props) => {
  return <div className={props.className}>
    {_hr2 || (_hr2 = <hr />)}
  </div>;
}

[kwonoj]

It looks like babel supports via plugin, any reason it can't be swc plugin?

[kwonoj]

Closing as not hearing any more information for the core between plugin. If you still believe this should be in a core transform, please feel free to file a new RFC #4162 with usecases that it cannot be done by plugin.

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.