Package Exports
- @babel/plugin-transform-react-constant-elements
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@babel/plugin-transform-react-constant-elements) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@babel/plugin-transform-react-constant-elements
Treat React JSX elements as value types and hoist them to the highest scope.
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
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} />
Mutable Properties
See https://github.com/facebook/react/issues/3226 for more on this
<div width={{width: 100}} />Installation
npm install --save-dev @babel/plugin-transform-react-constant-elementsUsage
Via .babelrc (Recommended)
.babelrc
{
"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 whitelist the element so that objects are allowed.
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.jsVia Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-react-constant-elements"]
});