For simple use cases, we also use this pattern, however, usually moved to separate functions for readability, real example:
createOpener(folder) {
return () => this.props.dispatch(Actions.listFiles(folder, this.props.member));
}
As said, for more complex layouts we need to reduce moving parts. For example, we have input masks that can easily consist of 200 input fields alone plus all kinds of other components. What we do in that case is usually pre-binding functions with arguments. Roughly like this:
// Target function
onItemClicked(item) {
// ...
}
preBind() {
const { data } = this.props;
// Bind with primary key
data.forEach(item => {
this[`__boundFn_data_${item.get('primaryKey')}`] = this.onItemClicked.bind(this, item);
})
}
render() {
const { data } = this.props;
return
{
data.map(item => {
const pk = item.get('primaryKey');
return { item.get('label') }
})
}
}
This approach involves a lot more complexity concerning removing bound functions and caching. And things like function name generation is stored in separate functions etc. It's not trivial but you get some performance out of it.
By doing this, though, we can rely on props checks for components to determined the necessity of rendering which allows us to use React's PureComponent in 90% of our components.