The Container pattern is one of the most useful patterns in React. You can use it to implement a declarative way to reuse custom functionality such as fetching data, authentication, layout, and others.
Let’s take a look at how it works!
What is the Container pattern?
The idea behind the pattern is simple: you have a container component that provides a custom functionality and renders any React node you feed it using the
Some of the use cases of the pattern are:
- Loader - the container will display a loader while a certain condition is truthy, otherwise, it will render the content.
- Authenticate gate - the container will not render its children if the user is not authenticated.
- Layout and styling - the container serves as a wrapper that provides consistent styling. Say you have multiple dashboard pages with different content, and you want them to have the same dashboard treatment.
Now that we learned about the container pattern, let’s look at a simple implementation.
Container pattern in action
Let’s build a simple gating container that will check to make sure that the user is authenticated before rendering the content.
Here’s what our container component would look like:
As you can see, it’s pretty straightforward: we use a React Hook to get the
isAuthenticated boolean from our app state. If it’s falsy, we simply return
isAuthenticated is truthy, we render the
Now you can put your UI pages behind the authentication layer using a simple declarative code:
Another nice thing about this approach is that it’s easy to add more complex logic to authentication without changing your client code.
If you would like to learn more about building a robust permission system for your React application, check out my other post on a clean way of handling roles and permissions in React.
Container with multiple children
In some cases, you might need to create containers with two content placeholders. For example, you might have a dashboard that allows providing a custom sidebar and the main content.
The code is pretty straightforward: our
Dashboard container accepts custom React nodes for both sidebar and the body of the dashboard.
Note: Capitalizing your component prop names is important. That’s how React determines whether the prop that
Dashboard received is actually a component of function.
The React container pattern is a handy way to abstract complex logic from your UI code. It allows you to reuse the common logic of your application in a declarative way.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.