React Design Pattern

React Container-Presenter Pattern

Video Link: Day 01: React Container-Presenter Pattern | Code Smell to Clean Code

📌 Pattern Idea

• Container → Handles logic, data fetching, state.

• Presenter → Pure UI, receives props, no business logic.

Example: UserList

Container (logic)

// UserListContainer.jsx
import { useEffect, useState } from "react";
import UserList from "./UserList";

export default function UserListContainer() {
  const [users, setUsers] = useState([]);

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

  return <UserList users={users} />;
}

Presenter (UI)

// UserList.jsx
export default function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} – {user.email}</li>
      ))}
    </ul>
  );
}

Usage

<UserListContainer />

---

✅ Container = data fetching & state ✅ Presenter = clean, testable UI