ReactJS - Should I use class method or external function

Question

Suppose I have a ReactJS component and want to call some custom function in it, is it better to have this function as a class method, or rather defined separately? (suppose that the function should be used only in this component)

class OnwComponent extends React.Component {
  constructor() {
    super();
    this.doubledNumber = this.doubledNumber.bind(this);
  }
  doubledNumber(num) {
    return num * 2;
  }
  render() {
    return (
      <p>{doubledNumber(10)} or {this.doubledNumber(10)}? Pros and cons?
    );
  }
}

function doubledNumber(num) {
  return num * 2;
}

"Better" in terms of what? IMO this comes down to preference. Since the function doesn't use this, there is no need to .bind it in the constructor or for it to be a class method. — Felix Kling
– Felix Kling, Commented Jan 19, 2017 at 19:22
The only two questions you need to ask yourself when deciding whether to use a Class or Functional component is 1) Do you need state and 2) Do you need lifecycle methods -- if you answer is yes to either of those then you should use a Class otherwise use a Function. — Richard Scarrott
– Richard Scarrott, Commented Jan 19, 2017 at 19:39
@riscarrott The question is not about class vs. functional components, please read it properly. — user3696212
– user3696212, Commented Jan 19, 2017 at 19:40
@FelixKling In whatever terms, mostly probably performance. I'm just thinking about creating some "best practices". — user3696212
– user3696212, Commented Jan 19, 2017 at 19:41
@user3696212 Ah, sorry -- in that case yes, I'd say it's more idiomatic JS to use methods rather than separate functions and it would allow sub classes (granted not popular in the React community) to override them. — Richard Scarrott
– Richard Scarrott, Commented Jan 19, 2017 at 19:44

SM79 · Accepted Answer · 2017-01-19 20:31:48Z

5

This is generally just a style preference.

Having said that, ESlint has exactly this rule: class-methods-use-this:

If a class method does not use this, it can safely be made a static function.

Also, one of the most popular React style guides (airbnb) has this rule enabled by default. So, in terms of best practices I would say: move doubledNumber function out of the class.

In the discussion related to implementing this rule in eslint, they talk about performance considerations too:

This rule is stylistic, but has performance implications. If a function is not using this, it is unnecessarily copied whenever a new instance of the class is created.

edited Jan 19, 2017 at 20:31

answered Jan 19, 2017 at 20:25

SM79

1,2642 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3696212 Over a year ago

Thank you, this is valuable.

Toe Over a year ago

how about functional components? can I move doubledNumber outside of the function?

Kaloyan Kosev · Accepted Answer · 2017-01-19 20:11:11Z

1

It depends.

If the function is related to the component logic itself and used only there, I'd leave it as a component method.

Otherwise:

If the function represents a solution to a generic programming common problem, I'd move it in a helper component, import the helper component in your React component and use it.
If the function is related to a specific business logic, I'd move it inside a service component, that holds the feature business logic, import the service component in your React component and use it.

So, this is primary an opinion based question. Based on your project set-up and the method logic, you need to make the final decision.

answered Jan 19, 2017 at 20:11

Kaloyan Kosev

13.1k8 gold badges63 silver badges93 bronze badges

Collectives™ on Stack Overflow

ReactJS - Should I use class method or external function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related