finds.dev← search

// the find

jamiebuilds/babel-react-optimize

★ 1,663 · JavaScript · MIT · updated Apr 2017

:rocket: A Babel preset and plugins for optimizing React code.

A Babel 6-era preset that bundles four transforms to cut per-render work in React: hoisting constant JSX, inlining createElement calls, stripping propTypes, and turning stateless classes into plain functions. It's aimed at teams running the 2016-2017 toolchain who want to measure the gains on their own code, since the README admits it has no benchmarks.

- The pure-class-to-function plugin bails out on classes with state, refs, instance methods, or static props, and its test fixtures cover each of those bailouts. You can trust it to leave impure components alone.

- transform-react-constant-elements hoists static JSX subtrees to module scope, so a `<span>Hello World</span>` is allocated once instead of on every render. It's a small win with no change in behavior.

- Helpers are split into separate packages (babel-helper-is-react-class, one package per plugin), so each transform can be installed and debugged on its own rather than as one opaque bundle.

- The last push was April 2017. The README targets Babel 6, `React.PropTypes` (removed in React 16), and babel-runtime, so on a current Babel and React stack this needs forking, not just a version bump.

- inline-elements only works properly alongside babel-runtime, as the README's own note says. Skip that setup and you get duplicated helper code in every file, which is an easy trap for anyone not already on that stack.

- No benchmarks. The README points to a third-party blog post, and the gain depends heavily on how the codebase uses the React API, so you'd have to measure your own render and bundle times before assuming a win.

- Most of the transforms are links to other maintainers' packages (Babel's monorepo, oliviertassinari's remove-prop-types). This preset is mostly a bundle of references, so check whether the upstream plugin is the one you want before you depend on this wrapper.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →