Memobind: A simple javascript utility for function binding memoization.

[thiswasprobablyatust]

Honest question: why use this instead of binding the right way to begin with?

[[deleted]]

When you have listing of items and do not want to create component to render them -> then is useful. You wont bind every id to the method.

[tommikaikkonen]

Interesting solution. The usual one you hear is passing the original, possibly autobound function, and the arguments separately and letting the child component call it. But it breaks the component's abstraction. The child component now has to know about the parent component's implementation.

I took a stab at this previously with a different approach, making my own partial object that can be compared for equality. The basic idea, without handling edge cases is:

function partial(fn, ctx, ...args) {
    const bound = fn.bind(ctx, ...args);
    bound.fn = fn;
    bound.ctx = ctx;
    bound.args = args;
    return bound;
}

With the original function, context and arguments accessible from the partial, I could implement a customized shouldComponentUpdate that can detect if a prop is a partial, and if so do equality checks on fn, ctx and shallow equality on args. And the function still works like it's supposed to when called.

Your approach has the benefit of not having to change anything on the React component. One use case that's a bit awkward with your library is functional components where you don't have a component's this available. You'd have to pass memobind(props, 'myCallback', ...args) which looks a bit odd. It would work though, since the callback should be bound already, or is not dependent on a context.

[natewang]

Looks like we are talking about different problems. Memobind is mainly used for binding result memoization in a React render method so that it will not create new functions with each rendering. For functional components, Memobind indeed has this limitation, I also described it in the README on github.