Stateful and Stateless Components In React
When we consider the difference in both names the first idea which is come to our mind simply is one has state and other one does not.
Stateful-Container/Smart
Stateless-Presentational/ Dumb
That means stateful components are keeping track of changing data while stateless components show the data received via props.
Stateful
Stateless
Stateless components are written as a function to aim to make components simple and stateless as possible. So difference components can be reused like lego pieces even though you do not intend to reuse them immediately after creating your component.
Now we will look when you should make a component stateful or stateless?
When we start to write a component we will not know how it will be turned at the end. So at the beginning divide your web application into several reusable components. Then If you component information dynamically changes you can have to have in there like if a user's current favorite booklist. Aim to have a parent component keep all the information, and pass it down to its children stateless components.
Having parent component as stateful and child components as stateless less when debugging regarding state management we do not need to worry about all the components but we can directly go to the parents component and looks for what is up. All the children's components have to worry about is receiving the information as props properly.
So presentational components /stateless components can vary depending on what information it receives.
The difference is stateful component is kept track of information on itself while presentational components get information via props.
If we have a component that is completely static we have a very good presentational component.
It is very nice if this happens but presentational components can take information via props and display.
Both stateless and stateful components are reusable when there is a need.
Thank you very much for reading my small articles. Follow me for more articles.
