When the complexity of Europe starts growing, it is important to isolate the responsibility of each
component.
Considering this, we can think about two big groups of components, containers and presentational components.
Containers that are also known as stateful components or smaller components are like, well, imagine
a time, a component that has all the logic of the candle.
This would be a great example.
Containers heiau the components whose starts directly related with the application so they can store
information of the application, something that we used to call a state and can also change this state.
They can also access services to fix data and communicate with all the parts of your application so
they can have business logic here and logic here.
There are services they can access that logic in order to change the state.
Let's talk now about presentational components also known as some components or stateless components,
because they don't have state.
Imagine now a display component whose only task is to display the countdown that the other timer is
providing.
In this case, the only responsibility of this component is to show this content, as well as report
the U.S. actions to the parent component in case they exist.
They can have state, but only internally, and they cannot modify the state by themselves.
They don't have leszczyc.
They have input, output and design for same input.
They have to generate exactly the same result.
So what do we get with this operation?
Well, first of all, reusability also better.
The stability components are easier to test and also it makes it easier to read your code.
Until now, we were doing both things in the app, combining OK, refactor it and simplify the code
in order to move the business logic to a stateful component PACOM diner.
I have called the timer and read that this container is handling the logic of the countdown while rendering
several presentation and components.
Potentially a container can render all the containers.
You then need them to be presentational.
Well, look at this structure.
We know there's a timer here.
This is the container where the logic is Einziger.
We have a couple presentational components like the bar that won't have any logic on the display component.
That is like the gun that we got before, but only presentational.
We also have a wooden it's not a component as a plan.
It's the element.
OK, in the next section you will have all the comments to update your code to these new starting point.