The Container/Presentational pattern
As your application scales in complexity, you may find it beneficial to adopt specific design patterns or guidelines to structure components. One such approach is the Container/Presentational pattern, which divides a component into two categories, the Container component and the Presentational component:
- Container components focus on functionality. They handle data fetching, state management, and user interactions. While they usually don’t render Document Object Model (DOM) elements themselves, they wrap around Presentational components and supply them with data and actions.
- Presentational components are all about the user interface. They get their data and event-handling functions exclusively through props, making them highly reusable and straightforward to test.
A common scenario where you’ll see this pattern in action is when using a UI component library. In this case, the library’s components serve as...