Can I use arrow function in constructor of a react component?

by

Option 1 is generally more preferable for certain reasons.

class Test extends React.Component{
  constructor(props) {
    super(props);

    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomething() {}
}

Prototype method is cleaner to extend. Child class can override or extend doSomething with

doSomething() {
  super.doSomething();
  ...
}

When instance property

this.doSomeThing = () => {};

or ES.next class field

doSomeThing = () => {}

are used instead, calling super.doSomething() is not possible, because the method wasn’t defined on the prototype. Overriding it will result in assigning this.doSomeThing property twice, in parent and child constructors.

Prototype methods are also reachable for mixin techniques:

class Foo extends Bar {...}
Foo.prototype.doSomething = Test.prototype.doSomething;

Prototype methods are more testable. They can be spied, stubbed or mocked prior to class instantiation:

spyOn(Foo.prototype, 'doSomething').and.callThrough();

This allows to avoid race conditions in some cases.

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Arrow function without curly braces
  3. Why shouldn’t JSX props use arrow functions or bind?
  4. What does calling super() in a React constructor do?
  5. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  6. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  7. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  8. ECMAScript 6 arrow function that returns an object
  9. When should I use arrow functions in ECMAScript 6?
  10. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  11. Correct use of arrow functions in React
  12. ES6 arrow functions not working on the prototype?
  13. React Native: require() with Dynamic String?
  14. Concatenating variables and strings in React
  15. Arrow Function in Object Literal [duplicate]
  16. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  17. What is the difference between using constructor vs state = {} to declare state in react component?
  18. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  19. ES6 array map doesn’t return anything: ReactJS
  20. Arrow functions and the use of parentheses () or {} or ({})
  21. Why React Hook useState uses const and not let
  22. Binding vs Arrow-function (in JavaScript, or for react onClick)
  23. When is it appropriate to use a constructor in REACT?
  24. React.createClass vs. ES6 arrow function
  25. Why can I not use `new` with an arrow function in JavaScript/ES6?
  26. React.js ES6 avoid binding ‘this’ to every method
  27. Should we use useCallback in every function handler in React Functional Components
  28. map function not working in React
  29. React cannot read property map of undefined
  30. $(‘elems’).each() with fat arrow

Leave a Comment