A simple javascript utility for function binding memoization.
npm install memobindMemobind
===========
A simple javascript utility for function binding memoization. It's motivated by the requirement of dynamic binding in React component rendering.
Install with npm
``sh
`
npm install memobind
`
Use with node.js, browserify or webpack:
js
`
var memobind = require('memobind');
memobind(context, methodName, ...args);
bind
$3
A 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.
bind
A common use case of in render is when rendering a list, to have a separate callback per list item:
`jsx
`
{this.props.items.map(item =>
...
)}
memobind
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, caches the function bind result so that it could be reused if the arguments are not changed. See below example:
`jsx
`
{this.props.items.map(item =>
...
)}
memobind
$3
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 JSON.stringify([item.id]).
`
If you need to call a method on the component props or other objects, wrap it as a component method. For example:
jsx
`
class List extends React.Component {
onItemClick(itemId) {
this.props.onItemClick(itemId);
}
render() {
...
}
}
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.
`
$3
Simple setState call
jsx
``