@babel/plugin-transform-react-constant-elements

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

Example​

In

constHr=()=>{
return<hrclassName="hr"/>;
};

constWithChildren=(props)=>{
return<divclassName={props.className}>
<hr/>
</div>;
}

Out

var _hr, _hr2;

constHr=()=>{
return _hr ||(_hr =<hrclassName="hr"/>);
};

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

Deopts

• Spread Operator

  JSX

  <div{...foobar}/>
  

• Refs

  JSX

  <divref="foobar"/>
  <divref={node=>this.node= node}/>
  

• Mutable Properties

<div style={{width:100}}/>

Installation​

npm install --save-dev @babel/plugin-transform-react-constant-elements

yarn add --dev @babel/plugin-transform-react-constant-elements

pnpm add --save-dev @babel/plugin-transform-react-constant-elements

bun add --dev @babel/plugin-transform-react-constant-elements

Usage​

With a configuration file (Recommended)​

{
"plugins":["@babel/plugin-transform-react-constant-elements"]
}

Options​

allowMutablePropsOnTags​

Array<string>, defaults to []

If you are using a particular library (like react-intl) that uses object properties, and you are sure that the element won't modify its own props, you can permit objects to be allowed for specific elements.

This will skip the Mutable Properties deopt.

{
"plugins":[
[
"@babel/plugin-transform-react-constant-elements",
{"allowMutablePropsOnTags":["FormattedMessage"]}
]
]
}

Via CLI​

babel --plugins @babel/plugin-transform-react-constant-elements script.js

Via Node API​

require("@babel/core").transformSync("code",{
plugins:["@babel/plugin-transform-react-constant-elements"],
});

References​

• [facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement