babel-plugin-transform-react-constant-elements
Hoists element creation to the top level for subtrees that are fully static, which reduces call to React.createElement and the resulting allocations. More importantly, it tells React that the subtree hasn't changed so React can completely skip it when reconciling.
This transform should be enabled only in production (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic.
Example
In
const Hr = () => {
return <hr className="hr" />;
};
Out
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
Deopts
Spread Operator
<div {...foobar} />Refs
<div ref="foobar" /> <div ref={node => this.node = node} />
Installation
npm install --save-dev babel-plugin-transform-react-constant-elements
Usage
Via .babelrc (Recommended)
.babelrc
{
"plugins": ["transform-react-constant-elements"]
}
Via CLI
babel --plugins transform-react-constant-elements script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-react-constant-elements"]
});