The way I distinguish between the two of them is:-

If a component needs to hold state then it classifies as a Smart Component. If a component just needs to display data and can receive that data from it’s parent component than those are classified as presentational components or dumb components.

For Example:- Let’s say we have an e-commerce application where in we have product listing page which displays a list of products.

In this scenario, a skeleton or a bare layout would have the following higher level components:-

<ShoppingApp>

<Header />

<SideMenu />

<ProductsContainer>

</ProductsContainer>

</ShoppingApp>

The ProductsContainer component here would focus on getting a list of products and then iterate through each of the products and render each Product Component.

In here we can call ProductsContainer as a Smart Component since this component holds the state which in this case are a list of products.

The sample code for Product component which is our Presentational Component would look something like this:-

The above is a Presentational Component, since it’s only responsible for displaying data and it receives that data in the form of props from it’s parent component.

So in conclusion if a component holds state and manipulates it, it’s a smart component and if a component just displays data which it receives in the form of props, then it get’s classified as a presentational component.

A golden quote from Dan Abramov that highlights this is: