How to replicate a React component lifecycle with useEffect

This article has been moved to Linguine Blog

Comments

[Nabin Adhikari]

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?

[Ruben]

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.

[Furkan Gulsen]

It was informative. Thank you for informing us. :)

[Ruben]

:)