Dumb Components and Smart Components

We all have witnessed the rapid growth of Javascript and its frameworks in the last few years. It’s said, “Every day a new Javascript framework is released”. Due to this rapid development in Javascript more and more companies and enterprises are migrating themselves upon it. Thus, making it a must-know language.

Components have been a part of Javascript frameworks from the very initial stage. Components not only help us to structure the architecture of the website but also save us a lot of time by breaking down the user-interface into small chunks and making the code more readable, reusable (DRY Pattern), and manageable. Unlike early days, when the application used to seem like hard-coded and tightly coupled. But is that all with the components? No. Components seem to be an easy concept but there lies a complexity in them.

Don Abramov originated an idea of dividing the components where he found that the components will be more easy to use and reason about if we divide them into two categories; where he called them Smart Components and Dumb Components but later he revised them to be Container and Presentational Components.

Dumb Components

Dumb components often called “Presentational Components” as the name suggests are dumb by nature. They’re entirely for the presentation purpose, i.e. To load data on the DOM. A dumb component may contain both Presentational component or the Container component inside and usually have some DOM mark up and styles of their own. Almost every basic UI component can be considered a Dumb component. For example, Groups of buttons, card, tabs, switches, etc. They don’t specify how the data is loaded or mutated and so they wouldn’t know how to change the data if they’re asked.

Dumb components focus on how things look.

Characteristics of a Dumb Component:

  • States: A dumb component rarely have states to manage but if they do, the states are for managing the UI elements and not something related to the data. For example, Groups of buttons, card, tabs, switches, etc.
  • Require no app dependencies: A dumb component requires no app dependencies such as flux actions or stores in general, other than the UI packages.
  • Events or actions: A dumb does not specify how the data is mutated rather they may fire an event or use actions passed through props to notify the parent component about some event.
  • Accept props: A dumb component may accept prop to allow them to be dynamic and reusable. For example, you might send the title of the button as a prop to from the parent component to allow it to have a unique title.

✨ Code Example ✨

ButtonComponent.vue

<template>
  <button class="btn btn-primary" v-text="title"></button>
<template>

<script>
  export default {
    props: {
      title: String
    }
  };
</script>

Smart Components

Smart components are also known as “Container Components” and act as a container to the dumb components. Their sole purpose is to serve the dumb components and act as a data warehouse or to provide behaviour to the dumb components. These components may contain both the presentational and the container components inside just like dumb components but they rarely have their own DOM mark-up or styles of their own. Because smart components have the burden of being smart so they have to focus more on functionality without the clutter of mark-up or styles and trust for the presentation on the dumb components. For example, App component (Root), Profile Page, Listing Page, A Story Container, etc. A smart component is smart for a reason since they are responsible for the heavy lifting of the application and passes down the data to the presentational components as props.

Smart Components focus on how things work.

Characteristics of a Smart Component:

States: A smart component has to manage states since they have to provide behaviour logic to the dumb components. Thus, they know when to render or re-render a component.

Require app dependencies: A smart component requires app dependencies such as flux actions or stores in general.

Manipulates data: A smart component have to work on life-cycle methods, capture changes, APIs, libraries, etc. and have to pass them down to the other components of the application. They have to offer functionality to the app, after all.

Events or actions: A smart component generally act upon the event fired by the child component by listening to the events emitted and in some frameworks smart components pass the action to fire whenever something happens to the child component as a prop and the child component calls this action for it.

Deliver props: A smart component has to offer the data and behaviour to the child component or the dumb component so they do it via props.

✨ Code Example ✨

ContainerComponent.vue

<template>
  <div>
    <button-component
      :title="title"
      v-if="display"
    ></button-component>

    <!--
        Other Components or Markup...
    -->
  </div>
<template>

<script>
  import ButtonComponent from "ButtonComponent.vue";

  export default {
    components: {
      ButtonComponent
    },

    created() {
        this.$store.dispatch("loadData");
    },

    data() {
      return {
        title: "Button",
        display: true
      };
    }
  };
</script>

Benefits of Dividing Components

Reusability

If You’ve heard about DRY Pattern (Don’t Repeat Yourself), You’d understand how important it is to follow this pattern. Since this pattern helps to prevent you from hunting for the same code you wrote in multiple areas of your application. By following this pattern and making the components reusable we can save a great deal of time. Think for the components such as Header layout, Footer layout, Card layout, etc. They get repeated in the application every now and then. Which you could bring in by importing to another component, thus making them a reusable component.

Flexibility to make changes

Separating smart and dumb components allows flexibility to make both small and large changes to the app without a great deal of tedious work.

Let’s think about our example above for a second. A designer who doesn’t have much experience with scripting language can just work on the small portion of the components rather Dumb component or Presentational component without the disturbing the other components or portion of it.

Code readability

It’s said, “No code is better than code”. So less you write, more it will be organized and maintainable in future. Anyone could be able to dive in and understand what’s going with the code or application, at last making the code readable and easy on eyes.

Provides consistency

By having a strong grasp of what smart and dumb components are, we can create an organization so that we always know where to look for our reusable components, and have set standards as to how those components are used.

Simplifies UI decisions

Since all of our UI components are separated into dumb dive in, we can easily dump all UI components on one screen where your client, web designer, or graphic designer can see everything at once.

Easy to test

Dumb components are very easy to test because they simply take-in props and return a piece of UI. This makes for very straightforward unit testing for dumb components.

That’s it, if you’re new to programming then you might want to read You don’t understand floating points or other posts in the related content below. Finally! Thanks for reading. Feel free to correct me or share your reading experience with me in the comments below.