Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building Applications with React and Redux Modularizing the React Scoreboard Application Building the Stopwatch Logical Component

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Why are some of them "funcName()" and some of them "funcName = () =>"?

When we translated the previous code to ES2015 syntax, some functions got converted to a different syntax. Some of them are "funcName()" and some of them are "funcName = () =>. What's the difference?

import React, { Component, PropTypes } from 'react';

export default class Stopwatch extends Component {
    state = {
      running: false,
      previouseTime: 0,
      elapsedTime: 0,
    }

    componentDidMount() {
      this.interval = setInterval(this.onTick);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }

    onStart = () => {
      this.setState({
        running: true,
        previousTime: Date.now(),
      });
    }

    onStop = () => {
      this.setState({
        running: false,
      });
    }

    onReset = () => {
      this.setState({
        elapsedTime: 0,
        previousTime: Date.now(),
      });
    }

    onTick = () => {
      if (this.state.running) {
        var now = Date.now();
        this.setState({
          elapsedTime: this.state.elapsedTime + (now - this.state.previousTime),
          previousTime: Date.now(),
        });
      }
    }

    render() {
    var seconds = Math.floor(this.state.elapsedTime / 1000);
    return (
      <div className="stopwatch" >
        <h2>Stopwatch</h2>
        <div className="stopwatch-time"> {seconds} </div>
        { this.state.running ?
          <button onClick={this.onStop}>Stop</button>
          :
          <button onClick={this.onStart}>Start</button>
        }
        <button onClick={this.onReset}>Reset</button>
      </div>
    )
  }
}

3 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

The reason for the difference is to avoid having to manually rebind your component's methods.

One thing to notice is that all the methods with funcName() { ... } are React defined lifecycle methods (i.e, render(), componentDidMount(), and componentWillUnmount()) but the added custom methods are all funcName = () => {}. You can write your custom methods as regular class methods but the way React creates components from ES6 classes, this won't be bound properly. This requires you to manually bind each method in the class's constructor:

export default class Stopwatch extends Component {
    constructor(props) {
        super(props);  // Component's constructor will take care of binding the standard React methods.
        this.onStart= this.onStart.bind(this);
        this.onStop= this.onStop.bind(this);
        this.onReset= this.onReset.bind(this);
        this.onTick= this.onTick.bind(this);
    }

    onStart() {
      this.setState({
        running: true,
        previousTime: Date.now(),
      });
    }

    onStop() { /* ... */ }

    onReset() { /* ... */ }

    onTick() { /* ... */ }

Using the ES6+ feature property initializers let's you set them to arrow functions which uses their fixed notion of this to solve the issue instead and reduce boilerplate.

https://babeljs.io/blog/2015/06/07/react-on-es6-plus explains a bit more about using ES6 and proposed extensions in writing for React.

Ilya Zinkevych
Ilya Zinkevych
7,481 Points
Ilya Zinkevych
Ilya Zinkevych
7,481 Points

So to summarize: React binds lifesycle methods on it's own while user defined methods have to be binded either manualy or with help of arrow functions.

Mark Wowor
.a{fill-rule:evenodd;}techdegree
Mark Wowor
Front End Web Development Techdegree Student 14,630 Points

updated link https://babeljs.io/blog/2015/07/07/react-on-es6-plus

Daniel Sousa
Daniel Sousa
11,975 Points
Daniel Sousa
Daniel Sousa
11,975 Points

SOMETHING GUIL DOESN"T TELL YOU MMKAY?!?

YOU CAN"T USE ARROW FUNCTIONS IN REACT CLASSES WITHOUT THE STAGE-0 LOADER OR ANOTHER APPROPRIATE LOADER, MMKAY?

SOMEBODY SHOULD MAKE THAT CLEAAR>=. MMMKAY?

john mccutchan
john mccutchan
6,225 Points
john mccutchan
john mccutchan
6,225 Points

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

In this case, all these functions refer to 'this' inside the block, the same "this". And the arrow functions are becoming method functions. I don't understand why they're making these choices in this example.