What are Presentation and Container Components?
One design pattern for React is using two different types of components together for organization and readability. You might have seen this referred to as “Fat and Skinny” components, “Pure and Stateful” components, or “Smart and Dumb” components. I’m going to refer to them as “Presentational and Container” components for this article.
This type of organization is not intended for every React situation or application, but it is encouraged to be aware of this structure and to use it when appropriate. The idea is that one component should not be responsible for both presentation AND data-fetching, rather, a component’s job should be one or the other. That way, you get smaller, reusable components.
Benefits:
- Separating Concerns (each component has one job)
- Presentational components are stable and concise
- Can easily reuse components
- Great for beginners to understand how and why coding with reusable components is ideal.
Presentational Components:
The Presentational Component is usually a functional component that you can pass props to from your Container component.
- Primary function is to display data
- Doesn’t manage state
- Almost always the children of a container component
- Defines how certain things should be displayed, how they look
- Usually stateless, functional components
- Examples: PhotoCard, UserInfo, Sidebar, List
Container Components:
You should implement container components when you start to notice you are using some components for “prop drilling”, or forwarding props down multiple levels of hierarchy. When these components end up not using the props they are being sent and are simply sending those props to another component, this would be a good time to start implementing container components.
- Usually class components
- Almost always the parent of presentational components
- Concerned with how things work
- Often has state
- Usually responsible for providing data and behavior to their children
- Examples: PhotoPage, UserContainer, PhotosSidebar, FollowersList
Let’s look at how this would look written in code:
Container Component:
Presentational Component:
I hope this was helpful. You can also look into React Hooks if you want to avoid prop drilling, which is another way to structure your React App’s architecture.
