Dumb components are components that don't interact with state. All they do is receive props and call functions passed down by props.
Smart components are components that do interact with state. They change state by dispatching actions and directly access the state for retrieving data.
It's important to keep the amount of smart component to the minimum, because dumb components are much easier to test as they don't contain any 'side effects'. To clarify, smart components can contain HTML and styles. They simply act as normal components.
Dumb Components
Dumb components are also presentational components which rarely have states to manage since they're just to show data on DOM. You can consider any basic ui elements to be a dumb component. Such as, buttons, tabs, switches, etc.
Smart Components
Smart components are also called container components and they act as data warehouse or data store whose work is to provide data or behavior to the dumb components and therefore they have states to manage.
You can read more about them in detail here.
Sriraman
Software Engineer @ LifeOn24
Smart components describe "how things work?" and Dumb components describe "how things look?"
Smart components
It will not have DOM markup or styles. It will do the processing and provide the data. It will work like the Controller in MVC.
Dumb components
It is UI only component. It will rarely have own state. If it has, It will have only UI states.
Check medium.com/@dan_abramov/smart-and-dumb-components… for detailed answer.