Smart VS Dumb Components

I was giving an interview some days back and every thing was going great .

Then the interviewer asked "Can you tell me the difference between a smart and a dumb component? "

I had although worked in a product based company for about 3 months then but had no idea what makes a component smart or dumb.

Obviously you don't have to go that road because today i am going to share with you what is the difference between a smart and dumb component in react.
This question will not be asked to a junior but i believe everyone should have a fair understanding of the concepts.

So lets get going

Dumb Component
Dumb component as the name suggests is "dumb"
meaning that it doesn't care about anything just itself.
It does not change any state or anything else .
Its just dumb
Dumb components are mostly made just for the UI based work.
Here is an example of a Dumb Component

<input label={label} type={type} onChange={onChange}/>

As you can guess that all the things that it needs that are changeable like label or type or a onchange callback is given as props and all it does is show the UI.
You can use it wherever you want to
You just have to pass the props it has and it will work like a breeze.
Smart Component

Smart components (or container components) on the other hand have a different responsibility. Because they have the burden of being smart, they are the ones that keep track of state and care about how the app works.

Smart Components has there own state inside of the components itself.
Its can also then send down the same state to the dumb components so they can work as expected without worrying about the state.

• A good example of a smart component can be the root of the app which handles a lot of the state and can also pass along the state to other components as well.

So thats the comparison between smart and dumb components .
I hope you guys got something to learn from it .

Want to encourage me to create posts like this more
Buy me a coffee