How to choose between class methods and properties in react?

Question

Consider the following code in react + ES6:

import React, { Component } from 'react';

const myFunction=(x,y)=>{
   return x*y
   };

 class MyTest extends Component {
 // state comes here 
   myProperty=(x,y)=>{
      return x*y
   };

   myMethod(x,y){
    return x*y
   }

    render () {
      return (<div>
          <h2>Result of myMethod: {this.myMethod(2,3)}</h2>
          <h2>Result of myProperty: {this.myProperty(2,3)}</h2>
          <h2>Result of myFunction: {myFunction(2,3)}</h2>
        </div>
      );
  }
 }
  export default MyTest;

Here's what the output looks like:

Result of myMethod: 6
Result of myProperty: 6
Result of myFunction: 6

Is there really a difference? Is one preferable to another?

score 2 · Answer 1 · answered Feb 07 '19 at 16:46

Considering the example that you shown, there is no big difference and they probably can be used interchangeable.

There are just a very little things like the fact that having an function expression declared outside, probably, internally, it won't get reacreated every time a class is instantiated. I honestly have to check the EcmaScript spec to verify it.

Things changes when you need to pass one of these functions as a reference to other functions and whether these destinations needs to access the original context or a new one.

Lambdas can't have other context than the one they're declared in, so they can be passed as references without troubles.

Instance methods, instead, needs to be bound to a context before they gets passed as references.

Have you ever seen this pattern?

constructor() {
  // ...
  this.myMethod = this.myMethod.bind(this)
}

myMethod(x,y){
  return x*y
}

This just overwrite myMethod in the class scope with a copy of the same method bound with this context. Basically, exactly the same as:

myMethod = (x, y) => x * y

Can I think of it this way: * If you don't need *this* to access inside the object, use the external function (myFunction in the example) * If you do need *this* , use the arrow function, myProperty in the example * If you encounter existing methods - such as *render* in react, bear in mind you need to bind them if you want to access them from outside the object — Francis, Feb 08 '19 at 07:40

score 2 · Answer 2 · answered Feb 07 '19 at 17:19

In your case I would recommend you to go with functional component i.e., the function which you have declared outside class is the right one to go in your case. Because you are passing in input and expecting output and there is no state management inside that function. So it’s good to go with functional component.

Regarding using arrow function or normal function, check below thread for detailed answer

React: Which is recommended arrow or normal function?

Raphael Rafatpanah · Answer 3 · 2019-02-07T17:30:23.147

myFunction can be viewed a private method of the MyTest class since myFunction is not being exported.

The difference between myMethod and myProperty is that myProperty uses the ES6 arrow function syntax.

In JavaScript, using the ES6 syntax for a method is not yet part of the EcmaScript standard. You'd need to use babel to convert it to ES5 syntax. The benefit of using the ES6 syntax is that you don't need to bind the myProperty to this, but you do need to bind myMethod (otherwise this.myMethod is undefined).

I don't think it's right to call it myProperty, however, since it is still a method. A property would be something like myProperty = {something: 5}. Basically, it's a property/attribute of the object, but not an action.

Property of a car: {color: "red"} or myColor = "red"
Method of a car: drive()

How to choose between class methods and properties in react?

3 Answers3