In Redux, when do I need to use .bind(this)

Question

Sometimes I am really confused that when do I need to append .bind(this) to the method (ES5) or use arrow function (ES6) e.g.

    handleSubmit(e) {
        console.log(this)
    }

    handleChange(e) {
        console.log(this)
    }

    render() {
        return (
            <div className="col-sm-4">
                <form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}>
                    <input type="text" name="user" placeholder="user"/>
                    <input type="text" name="comment" placeholder="comments"/>
                    <input type="submit" hidden/>
                </form>
            </div>
        )
    }

So if I want to access this inside handleChange and handleSubmit, then I have to use arrow function of onChange and onSubmit, otherwise the onChange and onSubmit can be changed as:

<form onChange={this.handleChange} onSubmit={this.handleSubmit}>

Am I right? thanks

Possible duplicate of [Why JSX props should not use arrow functions](http://stackoverflow.com/questions/36677733/why-jsx-props-should-not-use-arrow-functions) — Ori Drori, Jan 06 '17 at 14:05

score 2 · Accepted Answer · edited Sep 24 '17 at 16:20

Yes, you need to .bind each time when you pass your custom function to an event handler like onChange or onSubmit.

This is caused by the this context differences in React.createClass() vs extends React.Component.

Using React.createClass() will automatically bind this context (values) correctly, but that is not the case when using ES6 classes. When doing it the ES6 way (by extending React.Component) the this context is null by default. Properties of the class do not automatically bind to the React class (component) instance.

Btw .bind is not the only option available. See my answer here for a summary to all approaches I know.

PS: This is not a Redux specific thing, actually - nothing to do with how Redux works. That's a pure ReactJS related behavior.

score 1 · Answer 2 · answered Jan 06 '17 at 14:16

1

Yes, you are right, of course if you mean that this is the context of your class. In my opinion using .bind in these cases is more clear, but I don't know if that's more efficient.

answered Jan 06 '17 at 14:16

Karol Selak

4,248
6
35
65

thanks. I'd prefer arrow function because it is ES6 while .bind() is ES5 – Benjamin Li Jan 06 '17 at 14:42

score 0 · Answer 3 · answered Jan 06 '17 at 14:14

In your example you could either you arrow functions and make the form as you stated.

The other option is to have a constructor in which you bind.

constructor() {
  super();
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

then your form would be <form onChange={this.handleChange} onSubmit={this.handleSubmit}>

score 0 · Answer 4 · answered Jan 06 '17 at 14:17

There are multiple ways to bind the function to the correct context.

You are right when you want to make use of functions or attributes that are defined in the context of the React Class then you need to bind your functions.

Another approach to bind the functions is to specify the binding in the constructor

like

constructor(){
  super();
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleChange = this.handlechange.bind(this);

}

class App extends React.Component {
constructor(){
    super();
    this.state = {
       val: 'abc'
     }
    
}
handleSubmit(e) {
        console.log(this.state.val)
    }

    handleChange(e) {
        console.log(this.state.val)
    }

    render() {
        return (
            <div className="col-sm-4">
                <form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}>
                    <input type="text" name="user" placeholder="user"/>
                    <input type="text" name="comment" placeholder="comments"/>
                    <input type="submit" hidden/>
                </form>
            </div>
        )
    }
    
    }
    
    ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>

This will create new function on every render. It's not recommended (eg. 'reference' of this function is different on every render, so it's harder to know if componentShouldUpdate) — Adam Pietrasiak, Mar 20 '18 at 11:27
@pie6k, yes you are right, however this is a quick solution. Check https://stackoverflow.com/questions/45053622/how-to-avoid-binding-in-render-method/45053753#45053753 for detailed answer on how to avoid binding in render — Shubham Khatri, Mar 20 '18 at 11:33

In Redux, when do I need to use .bind(this)

4 Answers4