What you described is the current replacement for auto-bind (that React.createClass used to do for you). The issue arises when you have not just one SubComponent, but n SubComponents that require the parent method bound to the subcomponent's index, e.g. you have a deleteItemAtIndex method, and you only want to expose {deleteItem: deleteItemAtIndex.bind(this, i)} to each child component. ES6 React classes don't have any special way of handling this.
To re-iterate the possible solutions I've considered:
- Don't pass in a bound method; give the component the unbound method and its index and the child component can call it with the index passed in itself.
- Generalize this to a re-usable intermediary component that does for you (it does feel a bit dirty)
- Write your own bind function that annotates the bound function with original function + params allowing you to do a "deep" equality check, and then use a variant of PureRenderMixin that does this "deep" equality check.
Honestly, all of the solutions feel a bit hacky, but I've gravitated towards the first and second options.
To re-iterate the possible solutions I've considered:
- Don't pass in a bound method; give the component the unbound method and its index and the child component can call it with the index passed in itself. - Generalize this to a re-usable intermediary component that does for you (it does feel a bit dirty) - Write your own bind function that annotates the bound function with original function + params allowing you to do a "deep" equality check, and then use a variant of PureRenderMixin that does this "deep" equality check.
Honestly, all of the solutions feel a bit hacky, but I've gravitated towards the first and second options.