What’s up, everybody? It’s your boy gabe and today we’re gonna talk about one of the most important design patterns in React: the Container and Presentational Components pattern.

Now, I know some of y’all might be thinking, “Containers? Presentational? What’s all that about?” Don’t worry, I gotchu covered ❤️

What is the C&P design pattern

Basically, the Container and Presentational Components pattern is all about keeping your components organized and easy to work with. You separate your components into two categories: ones that deal with logic and data (containers) and ones that deal with rendering and UI (presentational).

Let me break it down for you. Your container components are the ones that handle all the data and logic. They’re like the coaches of your React app, calling the shots and making sure everything runs smoothly.

On the other hand, your presentational components are the ones that handle all the visual stuff. They’re like the star players on your team, showing off their skills and making your app look good.

Now, why is this important? Well, by separating your components into containers and presentational, you make your code much easier to work with. You can focus on one aspect at a time, instead of getting bogged down by all the details. Plus, it makes it easier to reuse components across your app, since you can just swap out the data in the containers.

So, how do you use the Container and Presentational Components pattern in your own React app? It’s simple, really. Just think about which components handle data and which ones handle visuals. Then, separate them into containers and presentational components, respectively.

An Example

Let’s look at a component that fetches a user’s information and displays it for a profile

const Profile = ({ userId }) => {
  const [user, setUser] = useState({});

  useEffect(() => {
    // Call API to get user data based on userId
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((response) => response.json())
      .then((data) => setUser(data))
      .catch((error) => console.log(error));
  }, [userId]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>{user.company?.catchPhrase}</p>
    </div>
  );
};

In this example, we only have a single component called Profile, which is responsible for fetching user data and rendering the user profile. We use the useState and useEffect hooks to manage state and fetch data from an API.

While this implementation works fine for small apps or components, it can become harder to maintain and extend as your app grows larger. By separating the data fetching logic into a container component and the rendering logic into a presentational component, you can keep your code organized and easier to manage.

Using C&P design pattern

const Profile = ({ userId }) => {
  const [user, setUser] = useState({});

  useEffect(() => {
    // Call API to get user data based on userId
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((response) => response.json())
      .then((data) => setUser(data))
      .catch((error) => console.log(error));
  }, [userId]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <p>{user.company?.catchPhrase}</p>
    </div>
  );
};

In this example, we have a presentational component called Profile, which is responsible for rendering a user profile with a given name, email, and bio.

We also have a container component called ProfileContainer, which is responsible for fetching user data and passing it down to the Profile component as props. The ProfileContainer component uses the useState and useEffect hooks to manage state and fetch data from an API.

By separating the data fetching logic into the ProfileContainer component and the rendering logic into the Profile component, we can keep our code organized and easier to maintain. Plus, if we need to reuse the Profile component elsewhere in our app, we can simply pass in different props without worrying about the data fetching logic.

And that’s it, folks! The Container and Presentational Components pattern might not be as flashy as some of the other design patterns out there, but it’s a fundamental one that can make a huge difference in your React game. So, get out there and start organizing your components like a pro. Peace!