Smart components are app-level components that perform functions and manage data while dumb components focus solely on the UI.
Manipulates Data: Smart components can fetch, capture changes and pass down application data.
Call Redux, Lifecycle methods, APIs, Libraries, etc: These components are called smart for a reason! They are responsible for calling libraries and functionality.
Manage state: Smart components are responsible for managing state and knowing when to re-render a component.
Rarely includes styling: Since dumb components focus on styling, it allows the smart component to focus on functionality without the clutter of styles too.
Focus on the UI: Almost all basic UI components should be considered dumb components. Examples include loaders, modals, buttons, inputs, etc.
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.
Require no app dependencies: Other than UI packages, like Reactstrap, dumb components do not require dependencies.
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.
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
