Frontend Engineering | VoidX Academy

39. Architecture & Component Patterns

Engineering at Scale

Writing code that works is intermediate. Writing code that can be maintained by a team of 10 developers over 5 years is expert-level engineering. React is highly unopinionated—it doesn't tell you how to structure your folders or components. This means you must actively design a robust architecture.

Feature-Based Folder Structure

The biggest mistake beginners make is organizing files by type (a folder for components, a folder for hooks, a folder for APIs). In large apps, this means modifying one feature requires editing files in 5 different folders. Feature-Based Architecture groups all files related to a specific business domain together.

src/
├── components/       # Only global, "dumb" UI (Button.jsx, Modal.jsx)
├── features/         # Business domains
│   ├── auth/         # Everything related to Authentication
│   │   ├── api/      # login API calls
│   │   ├── hooks/    # useAuth.js
│   │   └── components/ # LoginForm.jsx
│   └── products/     # Everything related to Products
├── pages/            # Route orchestrators (maps to URLs)
└── utils/            # Pure helper functions (formatDate.js)

Container / Presentational Pattern

To make components massively reusable, separate the logic from the UI. A Container (Smart) component fetches data and manages state. It passes that data as props to a Presentational (Dumb) component, which only cares about how things look.

// PRESENTATIONAL: Dumb, reusable, easy to test. Knows nothing about APIs.
function ArticleList({ articles, onLike }) {
  return (
    <ul>
      {articles.map(a => <li key={a.id} onClick={() => onLike(a.id)}>{a.title}</li>)}
    </ul>
  );
}

// CONTAINER: Smart. Handles the API fetch and state, renders the UI.
export default function ArticleFeed() {
  const { data } = useFetchArticles();
  const handleLike = (id) => api.likeArticle(id);
  
  return <ArticleList articles={data} onLike={handleLike} />;
}

Custom Hooks as Architecture

In modern React, complex business logic inside a component should be extracted into a Custom Hook. This keeps your components extremely clean and makes the logic perfectly reusable across different UIs.

// Extracted business logic
function useAuth() {
  const [user, setUser] = useState(null);
  const login = async (credentials) => { /* logic */ };
  return { user, login };
}

// The component is now just UI
function Navbar() {
  const { user, login } = useAuth();
  return user ? <Profile user={user} /> : <button onClick={login}>Login</button>;
}

Knowledge Check

Ready to test your understanding of 39. Architecture & Component Patterns?

38. Portals

40. React + TypeScript