Binding this in React

Raoul George
Aug 31, 2018 · 2 min read

React does not automatically bind this in ES6 classes.

From their docs:

In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don’t automatically bind this to the instance.

Render Binding

So in order to get around this, we learned to love bind.

class TestComponent extends React.Component {

handleClick(event) {}

render() {
return (
<div>
<input type="button" onClick={this.handleClick.bind(this)} />
</div>
);
}
}

The problem with this way of doing things is that a new function is called every time this component re-renders. It also looks a little clunky when we bind in the click handler.

Arrow Functions in render

A less verbose way to do this is by using arrow functions in your render method.

class TestComponent extends React.Component {


handleClick() { }

render() {
return (
<div>
<input type="button" onClick={() => this.handleClick()} />
</div>
);
}
}

However, although the syntax is more succinct, we still suffer from the same problem that a new anonymous function is created every time the render method runs.

Constructor Binding

To get around the performance problems with directly binding in the handler, we can instead bind this to the handler in the constructor.

class TestComponent extends React.Component {

constructor(props) {
super(props);
this.handleClick.bind(this);
}
handleClick() { }

render() {
return (
<div>
<input type="button" onClick={this.handleClick} />
</div>
);
}
}

We can avoid the performance issues using this method. But we will face issues with scalability. As we need a separate bind for each method, once our component becomes a little more complex, the constructor will be filled with a ton of bind statements.

Arrow Functions in class

To get around the scalability problems with the other methods, we can use arrow functions as class properties.

class TestComponent extends React.Component {

handleClick = () => { }

render() {
return (
<div>
<input type="button" onClick={this.handleClick} />
</div>
);
}
}

This solves the performance issues with the first two methods and the scalability problems with the 3rd option.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade