Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# babel-plugin-transform-react-constant-elements
> Treat React JSX elements as value types and hoist them to the highest scope
## Example
**In**
```js
const Hr = () => {
return <hr className="hr" />;
};
```
**Out**
```js
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
```
**Deopts**
- **Spread Operator**
```js
<div {...foobar} />
```
- **Refs**
```js
<div ref="foobar" />
<div ref={node => this.node = node} />
```
## Installation
```sh
npm install --save-dev babel-plugin-transform-react-constant-elements
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["transform-react-constant-elements"]
}
```
### Via CLI
```sh
babel --plugins transform-react-constant-elements script.js
```
### Via Node API
```javascript
require("babel-core").transform("code", {
plugins: ["transform-react-constant-elements"]
});
```
## References
* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226)