Bind functions to instances in a way that maintains strict equality when done multiple times

bind-once.js

const bindings = new WeakMap()

const getFns = context => {
  if (!bindings.has(context)) {
    bindings.set(context, {})
  }

  return bindings.get(context)
}

const bindOnce = (fn, context) => {
  const fns = getFns(context)
  const key = fn.toString()

  if (!bindings[key]) {
    bindings[key] = fn.bind(context)
  }

  return bindings[key]
}

export default bindOnce

Why?

In React, it's bad to declare functions inside a render() method and pass them down as props, as pure components just check for equality of the props received, and two sepearate function are never equal even if they do the same thing on the same instance.

A common solution to this problem is to do bind the methods to this in the constructor, which is of course a bit of a hassle. Also you can't conveniently write arrow functions inline in the render mathod, which would be more readable in some cases.

So another possible solution would be a custom bind function as this one, which associates functions with instances in a weak map, and looks up existing bindings by their stringified versions.

Usage

class MyComponent extends Component {
  render () {
    return (
      <MyPureComponent
        onClick={bindOnce(() => {
          console.log(this.state.something)
        }, this)}
      />
    )
  }
}

Inspired by reflective-bind:
https://github.com/lencioni/reflective-bind
https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144