Smart and Dumb Component

When you’re started learning any component-based frameworks like React or Angular, you probably came across the concept of Smart Component and Dumb Component and You probably heard of not use smart logic and dumbness together. Let’s Find out why?

Dumb Components

the dumb components are those which doesn’t handle any logical part of the app (like data fetching, data manipulation). The only responsibility of the dumb component is to render the containing template with data passed to it therefore they are also called the Presentational components since data presentation is their only responsibility.

Let’s take examples from React and Angular.

Consider the following React and Angular components

The above react & angular components are considered as Dumb Component as their sole responsibility is to display the name it gets in the input.

Smart Components

Smart components are those that handle all the business logic and manages all the dumb components. The smart component can have one or more dependencies from outside and It knows that it is a part of a bigger application, apart from that it’s connected to the application state and manages and passes it to children components, and listens to the events emitted by the children. They are also called container components as they contain all dumb components and manages them.

Consider the following React and Angular Components

The above components are considered smart components, they are fetching some data from the API call then manipulate them to pass it to the child components.

Conclusion

we need to separate our business logic from the UI elements, which makes our code more manageable and easy to maintain.