But I don't understand one thing, why so much trouble to make functional component similar to the class-based component. Why don't we leave functional component simple, there is a class-based component anyway for all these complex functionalities. Am I missing something, here?
That's a great question, and your way of thinking of building React components is totally valid.
I think it really comes down to lowering the barrier of entry. I believe that functional programming is a popular choice of programming style because it's easy to write, and to maintain.
4 reasons why someone might want to choose functional type components
1) Classes confuse people
JavaScript classes aren't really like traditional classes. Under the hood JavaScript is still a prototype base language. So all it's quirks still come in ES6.
2) Classes get complex really quickly
Managing state logic through component lifecycles become unmanageable and a mess. Reducing them into small chunks of code is easier to digest.
3) Re-usable state or effect logic between components (worth it)
4) Smaller webpack bundler (I like this one too a lot)
Nonetheless, if you're comfortable with classes and keeping UI components just as simple function components, keep doing that then.
Nice post, Ruben.
But I don't understand one thing, why so much trouble to make functional component similar to the class-based component. Why don't we leave functional component simple, there is a class-based component anyway for all these complex functionalities. Am I missing something, here?
That's a great question, and your way of thinking of building React components is totally valid.
I think it really comes down to lowering the barrier of entry. I believe that functional programming is a popular choice of programming style because it's easy to write, and to maintain.
4 reasons why someone might want to choose functional type components
1) Classes confuse people
JavaScript classes aren't really like traditional classes. Under the hood JavaScript is still a prototype base language. So all it's quirks still come in ES6.
2) Classes get complex really quickly
Managing state logic through component lifecycles become unmanageable and a mess. Reducing them into small chunks of code is easier to digest.
3) Re-usable state or effect logic between components (worth it)
4) Smaller webpack bundler (I like this one too a lot)
Nonetheless, if you're comfortable with classes and keeping UI components just as simple function components, keep doing that then.
It was informative. Thank you for informing us. :)
:)