This article references from author Dan_abramov (author of Redux). The purpose of this article is to give a perspective on a good design pattern when building a code base with react, vue, etc. As well as open a series of articles about design patterns for the front-end.
Theory
Container/Presentational is a design pattern that enforces separation of concerns by separating the visible parts from the application logic .
The simple problem is that we need to create an application that downloads 6 images from the server and displays those images on the screen:
The idea when applied with react is to divide it into two types of components:
- Presentational Components: These are the components responsible for what appears on the screen that the user can see. For example here is a list of pictures of dogs.
- Container Components: These are components responsible for handling data. The example here is Handling downloading images from the server.
Presentational Components
Some of the main functions of presentational components are:
- Responsible for how everything will display (html, css).
- Get the data and callbacks via prop .
- Do not specify how the data should be loaded or edited.
- Usually a stateless component (with no states within it) unless state is needed for the purpose of handling parts of the interface.
- Does not contain other dependencies in the application, e.g. redux
In the example below we have a presentational component DogList that receives data through the dog prop and displays a list of pictures of the dogs .
1 2 3 4 5 6 7 8 9 | const DogList = ({ dogs }) => { return dogs?.map((dog, i) => ( <div style={{ width: "70%", margin: "auto" }} key={i}> <img src={dog} alt="dogs" width="100%" /> </div> )); }; export default DogList; |
Example 1
Container Components
Some of the main functions of container components are:
- Take responsibility for how things will work.
- Provide data and behavior for presentational or other container components.
- Pass Flux/Redux actions or api calls as callbacks to presentational components.
- Usually stateful , which is the source of the data.
Continuing with example 1, below we have a DogListContainer component whose task is to call for data from an external API and pass it down to the DogList component through dogs props.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { useEffect, useState } from "react"; import DogList from "./DogList"; const DogListContainer = () => { const [dogs, setDogs] = useState(); useEffect(() => { fetch("https://dog.ceo/api/breed/labrador/images/random/6") .then((value) => value.json()) .then((value) => setDogs(value.message)); }, []); return <DogList dogs={dogs} />; }; export default DogListContainer; |
Example 2
Hook
With the advent of Hooks making it easy for developers to isolate and reuse logic that makes the container component’s effectiveness less and less effective. Using hooks improves composition more because using multiple hooks in the same component is simpler than passing props from multiple component containers to the same component.
From example 2 we separate the logic into the useDogList hook with the task of calling the api to get data and return the data as dogs .
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { useEffect, useState } from "react"; const useDogList = () => { const [dogs, setDogs] = useState(); useEffect(() => { fetch("https://dog.ceo/api/breed/labrador/images/random/6") .then((value) => value.json()) .then((value) => setDogs(value.message)); }, []); return { dogs }; }; export default useDogList; |
DogListHook.js
We convert DogListContainer.js to the following:
1 2 3 4 5 6 7 8 9 10 | import DogList from "./DogList"; import useDogList from "./DogListHook"; const DogListContainer = () => { const { dogs } = useDogList(); return <DogList dogs={dogs} />; }; export default DogListContainer; |
DogListContainer.js
If we don’t need to reuse the presentational component we can use hooks directly like below. This still ensures to isolate the logic from the view.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import useDogList from "./DogListHook"; const DogList = () => { const { dogs } = useDogList(); return dogs?.map((dog, i) => ( <div style={{ width: "70%", margin: "auto" }} key={i}> <img src={dog} alt="dogs" width="100%" /> </div> )); }; export default DogList; |
DogList.js
Some advantages and disadvantages
1. Advantages
- Separating sections makes it easier to understand the app or UI better.
- Easy to reuse. The same presentational components can be used by passing different data through props.
- Easily modify presentational components without touching application logic.
2. Disadvantages
- Hooks help us get the same results as the Container component, but are not completely replaceable.
- Applying this pattern in small applications sometimes becomes overkill.
Refer
Articles referenced from sources
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- https://www.patterns.dev/posts/presentational-container-pattern/
- https://www.fullstory.com/blog/react-hooks-a-lightweight-alternative-to-container-components/
Author’s words
This is my first post, so if you guys find it interesting, please help upvote to get motivated to continue the next post, and if you guys criticize or have some suggestions, feel free to drop a comment below. Thanks