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

babel-plugin-transform-react-constant-elements

Hoists element creation to the top level for subtrees that are fully static, which reduces both allocations and calls to React.createElement. 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} />
  

• Composite Components

  const ComponentA = () => <div><MyCustomComponent /></div>;
  

Installation

npm install 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"]
});

References

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