babel/packages/babel-plugin-transform-react-constant-elements
Ben Alpert 14d3c2e256 Avoid adding unnecessary closure for block scoping (#5246)
When you write

```
for (const x of l) {
  setTimeout(() => x);
}
```

we need to add a closure because the variable is meant to be block-scoped and recreated each time the block runs. We do this.

However, we also add the closure when no loop is present. This isn't necessary, because if no loop is present then each piece of code runs at most once. I changed the transform to only add a closure if a variable is referenced from within a loop.
2017-02-13 13:46:00 -08:00
..
2017-01-19 19:33:22 -05:00

babel-plugin-transform-react-constant-elements

Treat React JSX elements as value types and hoist them to the highest scope

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

.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