score:8

Accepted answer

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.

score:2

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.


Related Query

More Query from same tag