React Patterns: The Container pattern

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 children prop.

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from "react";
import { useGetUserSession } from "./useGetUserSession";

const GateComponent = ({ children }) => {
  const { isAuthenticated } = useGetUserSession();

  if (!isAuthenticated) return null;

  return <>{children}</>;
};

export default GateComponent;

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 null. If isAuthenticated is truthy, we render the children prop.

Now you can put your UI pages behind the authentication layer using a simple declarative code:

1
2
3
4
5
6
7

const PrivateComponent = () => {
  return (
    <GateComponent>
      <p>Secret data here, shhhh!</p>
    </GateComponent>
  );
};

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const Dashboard = ({ SidebarComponent, ContentComponent }) => {
  return (
    <div className="dashboard">
      <div className="sidebar">
        <SidebarComponent />
      </div>
      <div className="content">
        <ContentComponent />
      </div>
    </div>
  );
};

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.

Conclusion

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.
Happy coding!