React JS Components and Containers
What’s React Component or (React presentation component)?
1- It’s a class or function that describes part of a React UI / renders HTML .
2- Describe how things look.
3- Receive props, providing data and callbacks.
What’s Container component?:
1- It’s also a component but it’s at the app-level, so it’s wrapping other components.
2- Describe how things work.
3- Provide application data, do data fetching/ and async calls!
huh : ( , Sooooo?, what’s the point of having both of them in your app instead of having only components ??
Ok, here is the answer :
Instead of having one component perform two things :
1- Rendering and presenting React UI and Html .
2- Data fetching and business logic interactions .
You separate the two, the container component manages the data, actions, business interactions with the rest of the app, while the presentation component only handles presentation with props it receives from its container and any user interactions are passed to the container component instead of itself interacting with the rest of the application.
And according to Dan Abramov the creator of Redux, we will list some of the advantages:
1- Better separation of concerns: you understand your app and your UI better by writing components this way.
2- Better reusability : you can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.
3- Presentational components are essentially your app’s “palette”: you can put them on a single page and let the designer tweak all their variations without touching the app’s logic.
Here is an example by Michael Chan , he pretty much explains how it works!
You can also find more tech posts on my tech blog:
