Container/Presentational Pattern

Table of Contents

• When to Use
• Instructions
• Details
• Source

In 2015, Dan Abramov wrote an article titled "Presentational and Container Components" that changed the way many developers thought about component architecture in React. He introduced a pattern that separated components into two categories:

1. Presentational Components (or Dumb Components): These are concerned with how things look. They don't specify how the data is loaded or mutated but rather receive data and callbacks exclusively via props.
2. Container Components (or Smart Components): These are concerned with how things work. They provide the data and behavior to presentational or other container components.

When to Use

• Use this when you want a clear separation between data-fetching logic and UI rendering
• This is helpful for making presentational components reusable and easy to test