Rayan Hossain

Posted on Dec 15

React Container & Presenter Pattern in React (Beginner Guide with Real Example)

#react #nextjs #tutorial #productivity

If you are new to React, you may often feel confused when your components start getting too big, hard to read, and difficult to maintain. One common reason is that UI code and business logic are mixed.

The Container & Presenter Pattern (also known as Smart and Dumb Components) is a simple yet powerful approach to solving this problem.

This article explains the pattern in easy language, with clear examples, specifically for beginner coders.

What Problem Does This Pattern Solve?

Imagine a React component that:

Fetches data from an API
Manages loading and error states
Contains business logic
Renders UI

When all of this lives in one component, it becomes:

Hard to understand
Hard to reuse
Hard to test

The Container & Presenter Pattern solves this by splitting responsibilities.

Core Idea (Simple Explanation)

Separate how things work from how things look

Container Component → Handles logic and data
Presenter Component → Handles UI only

Think like this:

Container = Brain 🧠
Presenter = Face 🎨

What Is a Container Component?

A Container (Smart Component):

Fetches data
Manages state
Uses hooks (useState, useEffect, Redux, RTK Query, etc.)
Passes data to presenter via props

It does NOT focus on UI design.

What Is a Presenter Component?

A Presenter (Dumb / UI Component):

Receives data via props
Only renders JSX
No API calls
No business logic
Easy to reuse and test

It does NOT manage state or side effects.

Beginner Example: User Profile

Let’s see a real example.

Step 1: Presenter Component (UI Only)

// UserProfileView.jsx

const UserProfileView = ({ user, loading }) => {
  if (loading) {
    return <p>Loading user data...</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfileView;

📌 Notice:

No state
No API calls
Only UI

Step 2: Container Component (Logic Only)

// UserProfileContainer.jsx

import { useEffect, useState } from "react";
import UserProfileView from "./UserProfileView";

const UserProfileContainer = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, []);

  return (
    <UserProfileView
      user={user}
      loading={loading}
    />
  );
};

export default UserProfileContainer;

📌 Notice:

All logic is here
UI is delegated to the presenter

Step 3: Use the Container

// App.jsx

import UserProfileContainer from "./UserProfileContainer";

function App() {
  return <UserProfileContainer />;
}

export default App;

Why Is This Pattern Good for Beginners?

✅ Clear separation of responsibility

You immediately know where logic lives and where UI lives.

✅ Easy to read

Smaller files, focused purpose.

✅ Easy to reuse UI

Same presenter can be used with different containers.

✅ Easy to test

You can test presenter components using mock props.

Common Beginner Mistakes

❌ Putting API calls inside presenter components
❌ Using useState/useEffect in presenter components
❌ Overusing the pattern for very small components

Modern Alternative: Custom Hooks

In modern React, many developers move container logic into custom hooks.

const useUser = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then(setUser);
  }, []);

  return { user };
};

This still follows the same principle: logic separated from UI.

When Should You Use This Pattern?

Use it when:

Components are getting large
Business logic is complex
UI needs to be reused
You are building scalable apps

Avoid it when:

Component is very small
Logic is trivial

Learning Inspiration & Reference

This article is inspired by learning resources such as:

YouTube video reference: https://youtu.be/1UHbhikwg-s

(Used only for learning inspiration and conceptual understanding.)

Final Thoughts

The Container & Presenter Pattern is not about writing more code — it’s about writing cleaner and smarter code.

For beginners, mastering this pattern early will help you:

Write scalable React apps
Understand separation of concerns
Think like a professional developer

Happy Coding 🚀

DEV Community