- Have the `jsx` helper do the `defaultProps` work instead of calling `defaultProps` inline. - Put `key` after `props` and make it optional. - Inline `children` as rest args instead of in the object. - Rename `createRawReactElement` to `jsx`. I wish I was kidding. Most of these are silly microoptimizations. In my test file (based off an internal RN app), this reduces the parsing overhead of inlining from around 1% to 0.1% in JSC and from 0.6% to 0.0% in V8 (compared to element inlining before this commit). Once parsed, the initial render with inlining is the same speed as not inlining in JSC and ~1% slower in V8. A second initial render in the same context (reusing the function objects, JIT, etc) is 2.0% faster in JSC and 5.5% faster in V8.
babel-plugin-transform-react-inline-elements
Turn JSX elements into exploded React objects
Installation
$ npm install babel-plugin-transform-react-inline-elements
Usage
Via .babelrc (Recommended)
.babelrc
{
"plugins": ["transform-react-inline-elements"]
}
Via CLI
$ babel --plugins transform-react-inline-elements script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["transform-react-inline-elements"]
});