Are there any functional differences between using fat arrow syntax or not for ES6 class methods and React?

Question

Here are two examples of writing an ES6 class method:

The first uses non-fat arrow, or concise method syntax--whatever it is correctly called:

class Test extends Component {
  handleClick() {
    return 'clicked'
  }
}

The second uses fat arrow syntax:

class Test2 extends Component {
  handleClick = () => {
    return 'clicked'
  }
}

Should I always prefer to write using fat arrow syntax?

One thing I notice is you could use implicit return which could shorten code.

In most examples I see of people writing constructor() and render() methods in React, they do not use fat arrow syntax for those, but they do for all other class methods.

Why is this?

I am guessing the answer will have something to do with the this keyword since it is fairly intrinsic to classes and the context-preserving nature of fat arrows, but how does this relate to React and fat arrow syntax on class methods? The only case I can think of is that you might be able to avoid binding in the constructor for some cases depending how the class method is called later.

I would appreciate a scientific answer or a list of cases where a distinction is important.

It should be noted that methods such as `render`, `constructor`, and lifecycle hooks are internally called by React with the component as the `this` context, essentially meaning no binding is needed. The same is not true for event handlers, which need explicitly binding to the component. — Andrew Li, Jan 04 '18 at 00:26
"two examples of writing an ES6 class method" The second example isn't even ES6, it's a syntax extension that Babel supports. — loganfsmyth, Jan 04 '18 at 00:38
Possible duplicate of https://stackoverflow.com/questions/43600967/can-i-use-arrow-function-in-constructor-of-a-react-component — Estus Flask, Jan 04 '18 at 00:45
Suggested reading https://blog.andrewray.me/react-es6-autobinding-and-createclass/ — Andy Ray, Jan 04 '18 at 02:43

FuzzyTree · Accepted Answer · 2018-01-04T02:38:58.167

4

Consider the render function below

render() {
    return <div onClick={this.handleClick} />
}

When handleClick is defined as an arrow function, the function is executed when the click event is fired. Otherwise it's run at the same time as render.

Should I always prefer to write using fat arrow syntax?

It depends on how/from where you need to call your function. For event handlers, arrow functions are convenient because as you state the component's this is accessible and you also need to pass in the function as opposed to its output.

If you don't need to access the component's this or pass your function, then an arrow function is not necessary.

edited Jan 04 '18 at 02:38

answered Jan 04 '18 at 00:14

FuzzyTree

32,014
3
54
85

I like the information about execution time, but can you really consider an arrow function's context to be 'bound'? They just don't have context. – Andrew Jan 04 '18 at 01:02
1

@Andrew What I meant is that `.bind(this)` is automatically done for you when using arrow functions. – FuzzyTree Jan 04 '18 at 02:19
1

That's not true. Arrow functions intrinsically have no context. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Andrew Jan 04 '18 at 02:26
1

@FuzzyTree Andrew is right; the fact is once arrow function class properties are transpiled, they become properties assigned in the *constructor* like so: `foo = () => {...}` becomes `constructor() { this.foo = () => {...} }` where arrow functions don't bind this so they take `this` of the surrounding scope which is the class. – Andrew Li Jan 04 '18 at 02:28

Andrew · Answer 2 · 2018-01-04T02:41:40.313

Fat arrow functions are context agnostic. This means that places that normally put function out of context will stay in the proper context. The most common (possibly only?) use case of this in React is for event handlers.

These are all functionally equivalent. All commonplaces:

// 1
handleClick() {
  this.setState({clicked: true})
}

<button onClick={this.handleClick.bind(this)}/>

//2
constructor() {
  super()
  this.handleClick = this.handleClick.bind(this)
}
handleClick() {
  this.setState({clicked: true})
}

<button onClick={this.handleClick}/>

//3
handleClick() {
  this.setState({clicked: true})
}

<button onClick={() => this.handleClick()}/>

//4
handleClick = () => {
  this.setState({clicked: true})
}

<button onClick={this.handleClick}/>

Boils down to preference. The only one that you could be 'pegged' for is <button onClick={this.handleClick.bind(this)}/>, for performance issues.

Are there any functional differences between using fat arrow syntax or not for ES6 class methods and React?

2 Answers2