Smart vs Dumb Components: Know the Concepts

In this segment, you will look at the difference between Smart components and Dumb components.

As you learned in the last video, a dumb (aka presentational) component only presents data on the DOM. On the other hand, a smart (aka container) component provides data and logic to the dumb components.

Thus, as mentioned earlier, dumb components describe how things look, whereas smart components describe how things work.

The App  component actually does the work of showing all the subscribers inside the Phone Directory application. In the next video, you’ll learn how to refactor your code a little bit and convert the App  component into the ShowSubscribers  component.

In  the coming video, you’ll learn how to create PhoneDirectory  as a smart component inside the Phone Directory application.

You have successfully created PhoneDirectory  as a smart component consisting of the list of subscribers’ details. You have also defined the logic of adding a new subscriber inside the addSubscriberHandler()  method. This logic is passed to the AddSubscriber  component. Let’s use this logic inside the AddSubscriber  dumb component in the next segment.

Additional Resources:

Blog post by Dan Abramov, Co-author of Redux and create-react-app