babel-plugin-transform-react-binding
babel-plugin-transform-react-binding copied to clipboard
Stop worrying about method/function binding!!
😱 Experimental! 😱
babel-plugin-transform-react-binding
Automatically memoize function binding in your react render methods.
What?
So you want to bind (bind context OR partially apply args) functions in your React render method? Psych! You're going to break the purity of your next components since you're recreating those functions on every render call. To fix this you need to do context binding elsewhere, pass extra redundant props to caller or muck about with cumbersome boilerplate.
This plugin takes care of this for you. Write your func.bind(this, whatever, arg)
calls. Use event => handler(some, args, event)
freely.
Just, stop worrying!
We will transparently bind and memoize these behind the scenes. [Example]
You can read more about the function binding problem here.
Installation
$ npm install babel-plugin-transform-react-binding --save-dev
We also leave the memoize implementation up to you allowing you to specify via the
memoizeModule
option (see #Options). By default this uses the
lru-memoize package so you need to install
that too to get the default working.
$ npm install lru-memoize --save
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": ["transform-react-binding"]
}
Via CLI
$ babel --plugins transform-react-binding script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["babel-plugin-transform-react-binding"]
});
Options
-
cacheLimit = 500
- number of entries to keep in memoize cache PER COMPONENT -
memoizeModule = 'lru-cache'
- module exporting memoize implementation