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 <Fragment>
            {
                data.map(item => {
                    const pk = item.get('primaryKey');

                    return <div key={pk} onClick={this[`__boundFn_data_${pk}`]}>{ item.get('label') }</div>
                })
            }
        </Fragment>
    }

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.

> How can I do this without defining a function?

You do define a function, but only once. Constructor:

  this.smth = this.smth.bind(this);

JSX:

  <button onClick={this.smth}></button>

Kind of awkward, but the standard practice last I checked. Arrow methods (terminology?) are also something you can add to the language that does the equivalent of .bind() replacements.

isn't that functionally equivalent to `onClick={ this.smth }`?