Advanced Component Architecture

Composition Over Inheritance

In object-oriented programming, inheritance is a common way to share code. A class inherits methods and properties from a parent class. While powerful, this can lead to rigid hierarchies that are hard to change. React takes a different approach, summed up in a core principle: favor composition over inheritance.

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

Instead of building components that inherit functionality, we build components that contain other components. This creates a flexible, plug-and-play system. The simplest and most common form of composition uses the special children prop.

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// Usage:
<Card>
  <h1>A Title</h1>
  <p>Some descriptive text.</p>
</Card>

Here, the Card component doesn't need to know what it will render. It simply provides a wrapper. The content is passed in from the parent, making Card highly reusable for any kind of content that needs a border or background.

Advanced Composition

While the children prop is great for a single block of content, complex layouts often require multiple distinct sections. This is where the slot pattern comes in. Instead of a single children prop, we define multiple props that expect to receive JSX.

This pattern, sometimes called "specialization," allows a generic component to be configured with more specific ones. Think of a layout component with a sidebar and a main content area.

function TwoColumnLayout({ left, right }) {
  return (
    <div className="container">
      <div className="sidebar">{left}</div>
      <div className="main-content">{right}</div>
    </div>
  );
}

// Usage:
<TwoColumnLayout
  left={<UserProfile />}
  right={<ArticleFeed />}
/>

The TwoColumnLayout component is completely decoupled from UserProfile and ArticleFeed. Its only job is to arrange the elements it receives. This keeps layout logic separate from content logic, a key principle of separation of concerns that leads to cleaner, more maintainable code.

Manipulating Children

Sometimes, a parent component needs to communicate with its direct children without manually passing props to each one. For instance, a custom Tabs component might need to tell each Tab which one is currently active.

React provides a powerful API for this: React.Children and React.cloneElement.

The React.Children utility provides methods for working with the children prop, which is an opaque data structure, not a simple array. The map function lets you iterate over each child safely.

React.cloneElement lets you create a new element using another element as a starting point. Critically, you can add or modify props in the process.

import React, { useState } from 'react';

function RadioGroup({ children, name, onChange }) {
  return (
    <div>
      {React.Children.map(children, (child) => {
        // Clone each child (RadioButton)
        // and inject the shared `name` and `onChange` handler.
        return React.cloneElement(child, {
          name: name,
          onChange: onChange,
        });
      })}
    </div>
  );
}

// RadioButton doesn't need to know about the group initially.
function RadioButton({ value, children, ...rest }) {
  return (
    <label>
      <input type="radio" value={value} {...rest} />
      {children}
    </label>
  );
}

In this example, the RadioGroup acts as an invisible controller. It iterates over its RadioButton children and injects the necessary props to make them work together as a group. The developer using RadioButton doesn't have to manually pass the name or onChange handler to each one, reducing boilerplate and potential for errors.

Sharing Logic

What if you need to share complex stateful logic across many components that don't necessarily share the same UI? A classic example is tracking the mouse position and making it available to different components. This is a logic-sharing problem, not a UI composition problem.

Two patterns emerged to solve this: Higher-Order Components and Render Props.

Higher-Order Component

noun

An advanced technique in React for reusing component logic. A higher-order component is a function that takes a component and returns a new component with additional props or behavior.

HOCs wrap a component to give it extra powers. While effective, they can lead to wrapper hell (many nested components in the React DevTools) and naming collisions with props.

A more modern and flexible pattern is the Render Prop.

The term "render prop" refers to a technique for sharing code between React components using a prop whose value is a function.

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own rendering logic. The component provides its internal state as arguments to that function.

import React, { useState, useEffect } from 'react';

// This component encapsulates the logic of tracking the mouse.
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {/* It calls the render function with its state */}
      {render(position)}
    </div>
  );
}

// Usage:
function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      // The parent defines what to render with the provided state.
      <h1>The mouse position is ({x}, {y})</h1>
    )} />
  );
}

The MouseTracker knows nothing about what it will render. Its only job is to manage the position state. The App component decides what to render using the state provided by MouseTracker. This inverts control, making logic highly reusable and explicit.

While powerful, both HOCs and render props have been largely superseded by React Hooks for many use cases. Custom hooks like useMousePosition() can provide the same logic without adding extra components to the tree. However, understanding these patterns is crucial for working in older codebases and for grasping the evolution of React's architecture.

Quiz Questions 1/5

What is React's recommended approach for code and UI reuse between components?

Quiz Questions 2/5

When building a complex layout component, like a dashboard with a distinct sidebar, header, and main content area, which composition pattern is most suitable?

Thinking in terms of composition and clear patterns for logic sharing is the leap from building UIs to engineering scalable systems. These architectural patterns allow you to create complex applications that remain flexible, testable, and easy for other developers to understand.

Advanced React Component Architecture and State Management