minimal explanation of Dumb and Smart Components in React

Whenever it comes to React app development, the use of components is inevitable. React app development is a component-driven development.

A Component is basically just the composition of HTML, CSS, and JavaScript. Simply put React component is a function that takes some properties and returns a UI template or element. Components are the backbone of React app development.

This is a quick article that will introduce you to two main types of components. The names given to them are based on their working principle and dynamism. They are: Dumb component and Smart Component. Both these components play a vital role in the coding structure and implementation of an overall app. They provide a simplified workflow with well-structured code blocks and also reduce the repetitive code. Together they form a well-structured app with an optimized code base. As we all know components provide reusability, both of these components are re-usable, the only difference is what they offer as a UI.

Dumb component

The component is deemed dumb when they are built to perform simple task or operation. They do not offer any complicated logic. The bottom-line is they are there for the UI purpose only. In other words, we can call them as stateless components which do not house any states. The states are the variables that changes or updates based on the different actions or events. Well, this component does not entertain any state variables. Hence, the component is static, there is no any dynamic changes with response to any events. They are widely used to display the part of the UI that does not update or change dynamically. They are lightweight and helps to manage different UI sections in any app or web screen.

An example of the Dumb component is shown below:

const FrontendDev = (props) => {
  return(
  <div>
    <ul>
      <li>Do only Frontend stack</li>
    </ul>
  </div>
  )
}

Here, an example of a functional component is shown which returns a static UI with text.

Any Dumb component returns the UI template with elements that do not dynamically change themselves. They can contain static text, images, links, UI elements, etc. The main thing is a stateless component is more efficient than a stateful component due to the fact that it requires comparatively fewer resources and less memory to render templates on the screen.

Smart component

Smart component are usually built to do some complex logical operations. They handle their own state. Hence, they are also called Stateful components. These type of components are subject to dynamic change in response to any events in a application. They can house as many state variables as they can whose value can change anytime and trigger the re-render of the entire component. They are more heavy and powerful than the Dumb Stateless component.

Smart components return UI elements bound to the state variables which re-renders when dynamic changes occur. In a ES-6 style React component, we can identify a Smart component when a class component extends to a Component. These components manage their own state on the basis of variable change.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

An example of Smart component is shown below:

class Teamlead extends Component {
  constructor(props){
    super(props);
    this.state = {age : []};
  }
	render(){
		return{
			<div>
		    <ul>
		      <li>{this.state.age}</li>
		    </ul>
		  </div>
		}
	}
}

Here, we have a class component that extends to the Component and houses a state with the variable age. Any change in the age variable can re-render the entire component to reflect the change on the screen. Since they are subjected to change and re-render, they consume comparatively more resources and memory.

Conclusion

The main intention of this article was to introduce two types of component that governs the overall React development ecosystem. Both of these components work together to give proper usability and optimization to the overall React application. The main thing is we should know when to use which component and this article sheds a light on that as well. The dumb component for static UI and smart component for dynamic UI and logical operations.