• Posts
  •  / 
  • the-most-common-react-design-patterns-part-2

The Most Common React Design Patterns (Part 2)

The Most Common React Design Patterns (Part 2)

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 ⬇️

On Medium or On Linkedin


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.

No alt text provided for this image

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):

No alt text provided for this imagePostCard.tsx

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:

No alt text provided for this imagePosts.tsx

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:

No alt text provided for this imagePosts.tsx results in browser


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

No alt text provided for this imagePostsRenderer.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 ⬇️

No alt text provided for this imagePostTableItem.tsx

Here is its reusable usages in the App.tsx component:

No alt text provided for this imageApp.tsx with rendering PostsRenderers in different UIs

Now let me show you the result in the browser:

No alt text provided for this image

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:

No alt text provided for this imageBrowser showing posts in Table UI

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.

No alt text provided for this imageUserCard.tsx

And now lets see the RecoursesRenderer.tsx 🔥

No alt text provided for this imageResourcesRenderer.tsx

So, now lets see the usage of our ResourcesRenderer in our App.tsx.

No alt text provided for this imageApp.tsx using ResourcesRenderer.tsx to show different list of resources in different UIs

Last but not least let’s see the result in the browser:

No alt text provided for this image

Note: Browser shoing list of Posts rendered with ResourcesRenderer.tsx

No alt text provided for this image

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!

Related Posts

BE IN THE KNOW!

Get the updates and insights in the era of JavaScript, web3 and AI weekly.