Should one use const when declaring an arrow function in React class

Question

Inside a react class component, should one use a const/let to declare an arrow function, or they should be emmited:

  class ReactComp extend Component {
      const sayHello = () => {
          return 'Hello';
      }
      sayBye = () => {
          return 'Hello';
      }
      render() {
          <div>
            {this.sayHello}
            {this.sayBye}
          </div>
      }
  }

In this example, is sayBye declared correctly? (Without a const)

In addition, why outside the class, such a declaration does not work?

  class ReactComp extend Component {

      render() {
          <div>
            {sayHello}
            {sayBye}
          </div>
      }
  }
  const sayHello = () => {
      return 'Hello';
  }
  sayBye = () => {
      return 'Hello';
  }

This will return an exception: Uncaught ReferenceError: sayBye is not defined

Thanks a lot!

Run the code yourself and see which one works. Incorrect will throw SyntaxError. — dfsq, Jan 22 '18 at 18:10

score 10 · Accepted Answer · answered Jan 22 '18 at 18:23

The answer is "it depends"... your two examples do very different things. Let's take a look at both before I give you a more detailed answer.

class ReactComp extend Component {
  const sayHello = () => {
      return 'Hello';
  }
  sayBye = () => {
      return 'Hello';
  }
  render() {
      <div>
        {this.sayHello}
        {this.sayBye}
      </div>
  }
}

The code above probably throws a syntax error as const (in this context) is not a valid decorator. Even if it was valid (or you simply omit it), sayHello() becomes a method on the ReactComp class (i.e. an instance method). Every time you create a new instance of this component, it will have an internal method called sayHello.

const example = <ReactComp />;
example.sayHello(); // oversimplified example

Make sense? On to your next example:

class ReactComp extend Component {
    render() {
        <div>
          {sayHello}
          {sayBye}
        </div>
    }
}
const sayHello = () => {
    return 'Hello';
}
sayBye = () => {
    return 'Hello';
}

Ignoring for a moment the syntax error you mentioned earlier, this code creates two global(ish) functions: sayHello() and sayBye() which (depending on your other code) could be accessed globally by any other component or script.

sayHello(); // I can run this line of code anywhere!
// no need for "const example = <ReactComp /> because sayHello() was defined outside of that class

My point: instance methods on a class are different than functions declared outside of a component.

Should one use const when declaring an arrow function in React class?

If you're creating an instance method, then no you don't need const. If you're creating a generic (i.e. utility) function outside of a component, then yes you probably should use const.

Very helpful, I also had the same doubt. – Alok Ranjan Aug 20 '20 at 07:54 — Alok Ranjan, Aug 20 '20 at 07:54

score 2 · Answer 2 · answered Jan 22 '18 at 18:34

You can't define a variable using any declarative statement inside a class.

It expects property names to be attached to the this context of your class.

Defining the following class:

class C extends Component {
 sayGoodBye = () => console.log("Bye!")
 sayHello = who => console.log("Hello " + who)

 render() {
   this.sayGoodBye()
   this.sayHello('world')
   // ...
 }
}

can be translated as:

const C = {
  sayGoodBye : () => console.log('bye!'),
  sayHello : who => console.log('Hello ' + who),
  render : () => {
    C.sayGoodBye()
    C.sayHello('world')
  } 
}

if you try to define a variable inside a class using const/let/var it will result in an error.

Should one use const when declaring an arrow function in React class

2 Answers2