In ReactJS, as your application size is growing, you are going to have so many SMALL or big component. At this stage, it’s always better to categorize and decided the roles and responsibilities of the component. Based on role and responsibilities, we can divide the component in two PARTS. One is a presentational component and another type of components are container component. We also call presentational component as a stateless component or dumb component. Container components are also known as a stateful component or smart component. It is very important to distinguish between the presentational component and the container component.

Presentational components show the following BEHAVIOUR:

1. These types of component are concerned with presentation and styling.
2. These types of a component may contain both presentational and container components inside, and usually, have some DOM markup and STYLES of their own.
3. These types of component Often allow containment via this.props.children.
4. These types of component Don’t specify how the data is loaded or mutated. Data is passed to these type of component and they just create a markup to render the component.
5. These types of component receive data and callbacks exclusively via props.
6. These types of component rarely have their own state (when they do, it’s UI state rather than data).
7. These types of components are written as FUNCTIONAL component unless they need state, lifecycle hooks, or performance optimisations.