What's the difference between a smart component and a dumb component?

Smart components / container components :

1
Smart components are app-level components that perform functions and manage data while dumb components focus solely on the UI.
2
Manipulates Data: Smart components can fetch, capture changes and pass down application data.
3
Call Redux, Lifecycle methods, APIs, Libraries, etc: These components are called smart for a reason! They are responsible for calling libraries and functionality.
4
Manage state: Smart components are responsible for managing state and knowing when to re-render a component.
5
Rarely includes styling: Since dumb components focus on styling, it allows the smart component to focus on functionality without the clutter of styles too.

Dumb Components / presentational components:

1
Focus on the UI: Almost all basic UI components should be considered dumb components. Examples include loaders, modals, buttons, inputs, etc.
2
Accept props: Dumb components accept props to allow them to be dynamic and reusable. For example, you might send the title of a button in props from the parent component to allow it to have a unique name.
3
Require no app dependencies: Other than UI packages, like Reactstrap, dumb components do not require dependencies.
4
Rarely include state: The only instance where a dumb component has state is for manipulating the UI itself, not application data. Some examples of where a dumb component might have state would be button groups, tabs, switches and other UI elements that do not impact the data, only the UI.

Difficulty: 5/10

Topics: component architecture, state management, reusability

0-2 years experience

1
You need to display a list of users where each list item just shows the name and a follow button. How would you split the UI into smart and dumb components?
2
If you accidentally put data‑fetching code inside a presentational component, what issues might you see during development and testing?

2-5 years experience

1
Our dashboard passes a large data set to a chart component, but the chart re‑renders on every minor state change. How would you decide which parts should be smart versus dumb to reduce unnecessary renders?
2
During debugging you discover a child component mutating props received from its parent. Explain how using a smart/dumb split could have prevented this bug.

5-8 years experience

1
We have a growing library of reusable UI pieces. How would you organize the library using smart/dumb patterns to balance performance, testability, and long‑term maintainability?
2
When adding server‑side rendering, what changes would you make to existing smart components to avoid leaking client‑only side effects?

8+ years experience

1
Our legacy codebase mixes data fetching and UI in the same components across several teams. Outline a migration roadmap to refactor it into a smart/dumb architecture.
2
What processes or tooling would you put in place to enforce a smart/dumb component convention organization‑wide, ensuring consistency and reducing cognitive load?

❓Can you walk me through a recent component you built that follows this pattern?
❓What are the downsides of putting too much logic in a smart component?
❓How would you test a dumb component differently from a smart one?