Memoized binding of arguments to functions. Very useful for React and Preact!
You can use memo-bind to prevent allocating a new function on each render when all you want to do is bind a value as an argument to a function. The standard way to avoid this is to break out a child component and bind the value to that instead, but sometimes that is a bit cumbersome. By using memo-bind you can avoid having to refactor too much, while also avoiding unnecessary function allocations and unnecessary renders.
npm i memo-bind
memo-bind exports two functions, partial and bind. The only difference between the two is that bind takes a thisArg
import { partial, bind } from 'memo-bind'
//...
let cache = new Map()
//...
let memoizedFn = bind(cache, thisArg, fn, ...argumentsToBind)
let memoizedFn2 = partial(cache, fn, ...argumentsToBind)
memo-bind does not initiate its own cache. This makes it easier for the user to control the lifecycle of the cache, destroying it, clearing it, or replacing it whenever and however they want. You must provide an ES6 Map as the cache for memo-bind.
Note that the counter feature also demonstrates that these bindings functions avoid reallocting functions on each render. You should only see one log in the console.
import { h, Component } from 'preact'
import style from './style'
import { partial, bind } from 'memo-bind'
export default class Example extends Component {
state = {
items: {
1: {name: "item 1", id: '1'},
2: {name: "item 2", id: '2'}
},
count: 0
}
componentDidMount() {
this.interval = setInterval(
() => this.setState(state => ({count: state.count + 1})),
1000
)
}
multiply = factor => this.setState(
state => ({count: state.count * factor}))
// This is a function that needs the thisArg and an additional argument bound to it
deleteItem(id) {
// A little helper for making mutation free updates
function omit(key, obj) {
return Object.assign({},
...Object.keys(obj)
.filter(k => k !== key)
.map(k => ({[k]: obj[k]})))
}
this.setState({items: omit(id, this.state.items)})
}
// This is a function that only needs an argument bound, but not the thisArg
capitalizeName = item => {
let {items} = this.state
this.setState(state => Object.assign(items, {
[item.id]: Object.assign(item, {name: item.name.toUpperCase()})
}))
}
// If you declare the cache as a property of the component then
// its lifecycle will match that of the component and you
// shouldn't have to worry too much about cleanup or unbounded
// cache sizes
fnCache = new Map()
render({}, { items, count }) {
//Normally you would just stick this straight into the jsx but we need
//to save the result for demonstration purposes
let double = partial(this.fnCache, this.multiply, 2)
if (this.double !== double) {
this.double = double
console.log('created new double function')
}
return (
<div class={style.container}>
<button onClick={double}>Double</button>
<div class={style.counter}>{count}</div>
{Object.keys(items).map(itemId => {
let item = items[itemId]
return (
<div class={style.item}>
{item.name}
<button onClick={partial(this.fnCache, this.capitalizeName, item)}>
Capitalize
</button>
<button onClick={bind(this.fnCache, this.deleteItem, this, item.id)}>
Delete
</button>
</div>
)})}
</div>
)
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent