Original article (written by me) in italian here: https://accademia.dev/componenti-stateless-stateful-dumb-e-smart/
It doesn’t matter the framework or library you use in your Front-end, if it’s based on components (like Angular, React, Vue…) surely you’ve already come across these terms: stateless, stateful, dumb, smart, container, presentational.
Knowing them and understanding their differences is not only important, it’s fundamental! And unfortunately, people tend to get confused and someone may think that one term means the other… In fact, there’s a lot of confusion online. Let’s make it clear!
Stateful vs Stateless
A stateless component is a component without an internal state. What’s a state? It depends, in Angular it can be represented by internal properties of a class, in React it may be represented by the property this.state or by a hook, in StencilJS it may be indicated by a @State decorator, and so on… Let’s say that a component has an internal state whenever it can change behavior without receiving a property (or an input) from the outside.
Let’s take a simple case: an Accordion. How does it work? The user clicks on a tab and that tab opens, becoming visible. So, the internal state of an accordion could simply be the index of the open…
