Component Architecture

Component Design Principles

Effective component architecture follows key design principles that promote reusability, maintainability, and testability.

Single Responsibility

Each component should have one reason to change. A component that handles both display logic and data fetching violates SRP.

// Bad: Component does too much
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);
  
  if (loading) return <Spinner />;
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Good: Separated concerns
function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function UserProfileContainer({ userId }) {
  const { user, loading } = useUser(userId);
  if (loading) return <Spinner />;
  return <UserProfile user={user} />;
}

Open/Closed Principle

Components should be open for extension but closed for modification. Use composition over configuration props.

// Closed for modification, open for extension
function Card({ children }) {
  return <div className="card">{children}</div>;
}

Card.Header = function CardHeader({ children }) {
  return <div className="card-header">{children}</div>;
};

Card.Body = function CardBody({ children }) {
  return <div className="card-body">{children}</div>;
};

// Usage
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>

Liskov Substitution

Components should be replaceable with others that share the same interface. If you have a Button component, any variant should work in the same contexts.

Interface Segregation

Don't force components to depend on props they don't use. Create specific interfaces:

// Instead of one massive component
function MediaCard({ title, description, imageUrl, videoUrl, type }) { ... }

// Create focused components
function ImageCard({ title, description, imageUrl }) { ... }
function VideoCard({ title, description, videoUrl }) { ... }

Dependency Inversion

Depend on abstractions, not concretions. Use dependency injection for services:

// Inject dependencies
function DataList({ fetchFn, renderItem }) {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchFn().then(setData);
  }, [fetchFn]);
  
  return <ul>{data.map(renderItem)}</ul>;
}

// Usage with different data sources
<DataList fetchFn={fetchUsers} renderItem={renderUser} />
<DataList fetchFn={fetchProducts} renderItem={renderProduct} />

Container vs Presentational Components

This pattern separates data logic from presentation, making components more reusable and easier to test.

Presentational Components

These components focus on how things look. They receive data via props and call callbacks passed from parents.

// Pure presentational component
function TodoList({ todos, onToggle, onDelete }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} className={todo.completed ? 'done' : ''}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => onToggle(todo.id)}
          />
          <span>{todo.text}</span>
          <button onClick={() => onDelete(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

Container Components

These handle data fetching, state management, and business logic:

function TodoListContainer() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchTodos()
      .then(setTodos)
      .finally(() => setLoading(false));
  }, []);
  
  const handleToggle = async (id) => {
    const updated = todos.map(t => 
      t.id === id ? { ...t, completed: !t.completed } : t
    );
    setTodos(updated);
    await toggleTodo(id);
  };
  
  const handleDelete = async (id) => {
    setTodos(todos.filter(t => t.id !== id));
    await deleteTodo(id);
  };
  
  if (loading) return <Spinner />;
  
  return (
    <TodoList 
      todos={todos}
      onToggle={handleToggle}
      onDelete={handleDelete}
    />
  );
}

Benefits

• Testability: Test presentational components with mock data
• Reusability: Presentational components work with any data source
• Separation of Concerns: Clear boundary between logic and UI

When to Use

Use this pattern when components have complex data dependencies or when the same UI needs different data sources. For simple components, mixing concerns is acceptable.

Component Patterns

Compound Components

Manage shared state implicitly through context:

const TabsContext = createContext();

function Tabs({ children, defaultTab }) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.Tab = function Tab({ id, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button
      className={activeTab === id ? 'active' : ''}
      onClick={() => setActiveTab(id)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function Panel({ id, children }) {
  const { activeTab } = useContext(TabsContext);
  if (activeTab !== id) return null;
  return <div className="tab-panel">{children}</div>;
};

// Usage
<Tabs defaultTab="tab1">
  <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
  <Tabs.Tab id="tab2">Tab 2</Tabs.Tab>
  <Tabs.Panel id="tab1">Content 1</Tabs.Panel>
  <Tabs.Panel id="tab2">Content 2</Tabs.Panel>
</Tabs>

Render Props

Pass a function as a child that receives data:

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  const handleMouseMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  };
  
  return (
    <div onMouseMove={handleMouseMove} style={{ height: '100vh' }}>
      {render(position)}
    </div>
  );
}

// Usage
<MouseTracker render={({ x, y }) => (
  <p>Mouse at: {x}, {y}</p>
)} />

Higher-Order Components (HOC)

Wrap components to add behavior:

function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <Spinner />;
    return <WrappedComponent {...props} />;
  };
}

const UserListWithLoading = withLoading(UserList);

// Usage
<UserListWithLoading isLoading={loading} users={users} />

Custom Hooks

The modern alternative to HOCs and render props:

function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);
  
  return position;
}

// Usage
function App() {
  const { x, y } = useMousePosition();
  return <p>Mouse at: {x}, {y}</p>;
}