Install with npm
npm install memobind
Use with node.js, browserify or webpack:
var memobind = ;;
bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.
A common use case of
render is when rendering a list, to have a separate callback per list item:
This is not good because it creates new functions in every update. The eslint rule jsx-no-bind is used to detect such quality issues.
To resolve the problem,
memobind caches the function bind result so that it could be reused if the arguments are not changed. See below example:
How it works
memobind caches the function bind result in the
context object, with
methodName as the key for cache object, and
this[methodName] is the function to bind. So the context object should not be null, it's usually the component itself. The function binding result is stored with the key generated from arguments using JSON.stringify. In the above example, it is
If you need to call a method on the component props or other objects, wrap it as a component method. For example:
memobind is created only for the need of
bind with arguments. If there is no arguments, although memobind could be used, autobind decorator is a better choice with ES-future transpilers support such as Babel.
Simple setState call
<button =>Show Dialog</button>
MIT. Copyright (c) 2016 Nate Wang.