The Most Common React Design Patterns (Part 2)
Last week I published the part one of the most common react design patterns; you guys liked it and requested for its subsequent series. Today we are going to explore the second episode called Container Components Pattern. Before that, if you haven’t already read the first one, you can go through that in the link bellow ⬇️
Container Components Pattern
As we learned in part 1 of this series, the layout components tries to keep their children dumb means they shouldn’t know where exactly and how they are going to be displayed. Today we are learning the container components which does the same thing but not with Layout instead with the data fetching & management. 🌟Container components🌟 aka “smart” components is responsible for retrieving data from an API, managing the states and its changes; then, pass down the formatted data to the child component aka “dumb or presentational” components;
The benefit of using this pattern is that it helps to keep the components small, focused, and reusable. It also makes it easier to test and debug the components, as each component has a clear responsibility.
Okay!!! let’s stop these mumbo jumbo terms and explanations and see how they are useful and handy with the examples:
Let’s first start by creating a casual container component and how it manages the data; then, we will figure it out to make it generic and super reusable.
Today as we are dealing with data, I use a fake API called Jsonplaceholder to load a list of posts. If you take a look at the above link, the API gives us the bellow type of data for each post that we put it in a separate file called postTypes.ts inside a folder called types in the src folder of your project.
types/postTypes.ts
Now, lets create a presentational (dumb) component called PostCard.tsx to present our post info in it. Here bellow is how I did it with some styling(Tailwind CSS):
so now let’s create our normal stateful or smart component called Posts.tsx and see how it manages the data, state and passing down the info to children:
After this I render the Posts component inside the App.tsx and let’s see the result in the browser before going to discuss how to enhance it and make it more generic:
Alright, now as you see that Posts.tsx component that renders a list of PostCard.tsx components, but let’s assume that we have the same API and want to use it in various design UIs (cards or any other UI). With the above approach, we have to create another container component and then render the new card in it exactly like above. To enhance the reusability let’s create another components called PostsRenderer.tsx
Okay!! PostsRenderer component is now a fully reusable component while we want to fetch posts and render them in any UI which we want ( UI = card props).
let’s see how we use this with different UIs: PostCard.tsx ⬆️ & PostTableItem.tsx ⬇️
Here is its reusable usages in the App.tsx component:
Now let me show you the result in the browser:
Browser showing the list of posts in card UIs
And now if we scroll down to reach at the end of gird Layout(card) UIs , we see another UI in table mode:
Alright, now that came so far, let me enhance this Container components to be even more reusable. This one might blow your mind 🔥🔥
Let’s change our PostsRenderer.tsx file to RecoursesRenderer.tsx to be able to load any array of resources and show them in any desired UI.
This time we need another API to load list of something else as well, so I use again jsonplaceholder** but the /users endpoint to load list of users.
Before showing the amazing RecoursesRenderer.tsx, let me show you the UserCard.tsx — UI (dumb component) for showing a user.
And now lets see the RecoursesRenderer.tsx 🔥
So, now lets see the usage of our ResourcesRenderer in our App.tsx.
Last but not least let’s see the result in the browser:
Note: Browser shoing list of Posts rendered with ResourcesRenderer.tsx
Note: Browser shoing list of users rendered with ResourcesRenderer.tsx
Alright, In this article we learnt about Container Component Design pattern. We learnt how this pattern separates the UI from Data layer by dividing the components into two Container components and presentational components.
🌟🌟Next parts are also coming every weekend🌟🌟
🙏 Thanks for reading! If you liked it, stay tunned with JS Dojo news letter on Linkedin, give a clapp in medium and share it with in your own community in daily.dev.
Also, If you want to be updated with the tools, insights and my everyday learning join my daily.dev squad & share your daily readings with all other JS developers:**** JS Dojo!
