React Class Fields and Arrow Functions the simple 101.
Advantages of using class fields and Arrow functions
- Omit the usage of constructor.
- Arrow functions aren’t necessary to be "binded", you have access to the context.
- Less verbosity, save on keystrokes.
- Arrow functions prevent bugs related to *this*.
- Using class fields with arrow functions might make it more difficult to test it, since the method eventually is instantiated in the constructor.
- Some have pointed out a performance difference, it’s a bit slower.
- For arrow functions, if you don’t define them as a class field it gets instantiated every time.
Some disadvantages have been pointed out in this article (https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1). Please also read the comments.
Some advantages of arrow functions have been pointed out in this article https://reactarmory.com/answers/when-to-use-arrow-functions
Without class fields:
With class fields:
Class fields and arrow functions make React components neater, nevertheless it has drawbacks too. Every team should evaluate if the cost of class fields and arrow functions are worth it. Personally I see class fields and Arrow Functions as a progress forward for the React Environment, understanding the drawbacks before wildly using it is important in order to know how to solve an issue potentially caused by it. Summarising, I see more pros then cons. I recommend using class fields with Arrow Functions always, but please define your arrow functions! = )