DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React - ES6 tricks in Classes
Krisztian Kecskes
Krisztian Kecskes

Posted on

React - ES6 tricks in Classes

I read several entries with example codes in connection with React. For example, I'd just read a short article about Stateful and Stateless components with React. I saw a lot of "old way approaching" solution, so I would like to share with you a trick about the class based components and their state. You can use and try them with Create React App now!

The constructor things

You don't need to define constructor in a class based component just because of function bindings.

πŸŒ™ Old way:

constructor(props) {
  super(props);
  this.state = {
    value: ""
  };
  this.handleChange = this.handleChange.bind(this);
}
Enter fullscreen mode Exit fullscreen mode

🌞New way:

class Test extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
     value: ""
    };
  }

  const handleChange = () => {
    // Handle change...
  }

  render() {
   return(
    <input value={this.state.value} onChange={this.handleChange} />
   );
  }

}
Enter fullscreen mode Exit fullscreen mode

And this is not the end! The local state can be defined on the class level also:

class Test extends PureComponent {

  state = {
    value: ""
  }

  const handleChange = () => {
    // Here comes the change things
  }

  render() {
   return(
    <input value={this.state.value} onChange={this.handleChange} />
   );
  }

}
Enter fullscreen mode Exit fullscreen mode

With this solution, you don't need to use constructor and you don't need to bind functions with their name in it. It is question of taste, I know, but I think we can write clear and more readable code this way.

Top comments (6)

Collapse
 
puritanic profile image
DarkΓΈ Tasevski

Using constructor is not the old way, it's still a viable way to construct a state, and in the end this:

state = {
    value: ""
  }

is transpiled to this:

 constructor(props) {
    super(props);
    this.state = {
     value: ""
    };
  }

So. it's not the old way, it's just syntatic sugar.

Using arrow functions to bind methods to the class is really useful tho.

Collapse
 
kozakrisz profile image
Krisztian Kecskes • Edited on

True story! :-) That is right!
I meant "old way" and "new way" like... we "used that way" and we "should use this way". :-)

Collapse
 
christfriedbalizou profile image
Christfried

Arrow functions is evil. It's just adding more complication reading js code those days. I'll stick to constructor. However it's not old because you use arrow functions. Function != Arrows functions.

Collapse
 
kozakrisz profile image
Krisztian Kecskes

I understand, but disagree. Arrow functions are good friends in nowadays.

Collapse
 
rkichenama profile image
Richard Kichenama

Using arrow functions for members defined that way allows for this to remain scoped to the instance of the class / object. It is possible to define it as handleChange = function () { ... }, but then you would need the constructor to bind handleChange to the instance.

Collapse
 
kayis profile image
K (he/him)

I think function is like var only to be used in legacy cases.

let, const and => are much more predictable.

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.