Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Understanding State Bind Event Handlers to Components

Why not bind in the constructor?

In this video, the preferred solution suggested to binding is to use arrow methods...but wouldn't it be a cleaner solution to just bind the method in a constructor? It just feels wrong having to divert from the class method paradigm to solve this, when there already is an easy solution...or is the constructor solution bad in some way?

I also feel that this video rushed through this, immediately changing to testing the code after writing it. Just a bit of delay to allow pausing in time to see the actual code written would not hurt.

EDIT: I saw now that constructor binding is mentioned in the teachers notes. But still: wouldn't this be the most elegant solution?

2 Answers

Ezra Siton
Ezra Siton
12,644 Points

First, this is not why not - this is one recommended approach to solve the idea of binding (You can use a constructor - you find examples under React docs).

"THE PROBLEM" You should not call setState() in the constructor() = extra lines ==> Less readable + Harder to maintenance.

https://reactjs.org/docs/react-component.html#constructor

Bind in constructor

constructor() {
  super();
  this.state = { score: 0 };
  this.incrementScore = this.incrementScore.bind(this);
}

 incrementScore(){
    this.setState({
      score: this.state.score + 1
    });
  }

Bind in Render

The option below is more readable than this option (Imagine you work with 50 methods, not 1 - and you should remember for each one to add extra lines inside the constructor).

  state = {
    score: 0
  };

  incrementScore = () => {
    this.setState({
      score: this.state.score + 1
    });
  }

On the button click event:

<button className="counter-action increment" onClick={this.incrementScore.bind(this)}> + </button>

This article sums well this issue:

Thanks Ezra for your excellent reply. It was also good to read that article with the decision tree. I guess to me it felt intuitively wrong to not use the class/method paradigm in order to fix this (pun intended:-). But if there are more than a few methods then ofc it gets messy.

Please note, various style guide warn not to use the arrow function. Airbnb classifies is as very bad practice: Do not use arrow functions in class fields, because it makes them challenging to test and debug, and can negatively impact performance, and because conceptually, class fields are for data, not logic.

https://github.com/airbnb/javascript/tree/master/react