Unlocking the Power of Compound Components in React

If you've been working with React for a while, you've probably encountered the need for creating reusable and maintainable UI components. One of the patterns that can significantly improve our codebase is the Compound Component pattern. Today, we're diving deep into how this pattern works, the problems it solves, and some advanced techniques to make our components even more powerful.

Before we dive in, a quick note on accessibility: It’s crucial to keep accessibility in mind when building components. While we’ll keep things simple for clarity, always ensure your components are accessible in real-world applications.

Why the Compound Component Pattern?

1. Prop Drilling

Imagine you have a parent component that needs to pass data down to a deeply nested child component. To do this, you have to pass the data through every layer in between, which can quickly become messy and hard to manage. This is known as "prop drilling," and it's a common headache in React. The Compound Component pattern helps us avoid this by allowing child components to communicate directly with their parent, without needing to pass props through every intermediate layer.

2. Component Configuration

As your components grow more complex, managing configurations through props can become cumbersome. You might find yourself with a component that has a dozen or more props, making it difficult to use and maintain. The Compound Component pattern provides a more intuitive and flexible way to configure components by letting related components "talk" to each other directly.

3. Reusability and Composability

This pattern is fantastic for promoting reusability and composability. It lets us build components that fit together like Lego bricks, leading to cleaner and more maintainable code.

Features of Compound Components

1. Context API Usage

The first tool in our toolbox is React's Context API. Think of it as a way to create a shared space where components can store and access data, without needing to pass it explicitly through props. This shared space is known as "context," and it helps keep our component hierarchy clean by avoiding prop drilling.

2. Clean and Intuitive API

By using compound components, we can expose a clean and intuitive API. This means that other developers (or future you) can easily understand how to use your components without having to dig into the implementation details.

3. Flexibility in Composition

This pattern allows us to define child components within the parent component, giving us flexibility in composition. It makes customizing and extending components a breeze.

Implementing Compound Components: A Practical Example

Let's kick things off by creating a simple Tabs component using the Compound Component pattern.

Step 1: Define the Context

First, we need a way for our components to share data without passing props through every level of the component tree. This is where React’s Context API comes in.

Here’s how it works: We create a context, which is like a global object that can store data. Any component inside this context can access the data without needing props. We’ll also create a provider component (TabsProvider) that wraps our context and provides the data to any child component that needs it.

import React, { createContext, useState, useContext } from 'react';

const TabsContext = createContext();

const TabsProvider = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  const value = {
    activeTab,
    setActiveTab,
  };

  return (
    <TabsContext.Provider value={value}>
      {children}
    </TabsContext.Provider>
  );
};

const useTabsContext = () => {
  const context = useContext(TabsContext);
  if (!context) {
    throw new Error('useTabsContext must be used within a TabsProvider');
  }
  return context;
};

What did we just do?

• We created a TabsContext that will hold the shared state.
• We made a TabsProvider component that wraps its children and gives them access to this context.
• Finally, we wrote a useTabsContext hook, which is just a convenient way to access the context in our components.

Step 2: Create the Compound Components

Now that we have our context set up, let’s create the actual Tabs components. We’ll start with a parent Tabs component, which will use our TabsProvider to wrap everything. Then, we’ll create TabList, Tab, and TabPanel components.

const Tabs = ({ children }) => {
  return <TabsProvider>{children}</TabsProvider>;
};

const TabList = ({ children }) => {
  return <div role="tablist" className="tab-list">{children}</div>;
};

const Tab = ({ children, index }) => {
  const { activeTab, setActiveTab } = useTabsContext();

  return (
    <button
      role="tab"
      aria-selected={activeTab === index}
      className={\`tab \${activeTab === index ? 'active' : ''}\`}
      onClick={() => setActiveTab(index)}
    >
      {children}
    </button>
  );
};

const TabPanel = ({ children, index }) => {
  const { activeTab } = useTabsContext();

  return activeTab === index ? (
    <div role="tabpanel" className="tab-panel">{children}</div>
  ) : null;
};

What did we just do?

• The Tabs component wraps its children with TabsProvider, giving them access to the context.
• The TabList component serves as a container for the tabs.
• The Tab component uses the context to determine if it’s the active tab and updates the active tab when clicked.
• The TabPanel component displays content only when its corresponding tab is active.

Notice that we’re using standard HTML roles like tab, tablist, and tabpanel to make our components more accessible. This is a good practice to follow when building real-world applications.

Step 3: Compose the Components

Let’s put everything together to create a working Tabs interface.

const App = () => {
  return (
    <Tabs>
      <TabList>
        <Tab index={0}>Tab 1</Tab>
        <Tab index={1}>Tab 2</Tab>
        <Tab index={2}>Tab 3</Tab>
      </TabList>
      <TabPanel index={0}>Content for Tab 1</TabPanel>
      <TabPanel index={1}>Content for Tab 2</TabPanel>
      <TabPanel index={2}>Content for Tab 3</TabPanel>
    </Tabs>
  );
};

export default App;

Handling Different States Conditionally

Next, let’s build a file dropzone component that handles different states, like accepting or rejecting a file. This is a great example of using the Compound Component pattern to conditionally render content based on internal state.

But first, let's introduce a slightly different way of organising our compound components: using dot notation.

Step 1: Define the Context

Just like before, we’ll start by creating a context to manage the dropzone’s state.

import React, { createContext, useContext, useState } from 'react';

const DropzoneContext = createContext();

const DropzoneProvider = ({ children, state }) => {
  const value = { state };
  return <DropzoneContext.Provider value={value}>{children}</DropzoneContext.Provider>;
};

const useDropzoneContext = () => {
  const context = useContext(DropzoneContext);
  if (!context) {
    throw new Error('useDropzoneContext must be used within a DropzoneProvider');
  }
  return context;
};

Step 2: Create the Compound Components with dot notation

Here’s where things get interesting. Instead of having separate components like Tab and TabList, we’re going to use dot notation to organize our dropzone components under a single Dropzone namespace. This makes it clear that these components are related and intended to be used together.

const Dropzone = ({ children, state }) => {
  return <DropzoneProvider state={state}>{children}</DropzoneProvider>;
};

Dropzone.Accept = ({ children }) => {
  const { state } = useDropzoneContext();
  return state === 'accept' ? <div className="dropzone-accept">{children}</div> : null;
};

Dropzone.Reject = ({ children }) => {
  const { state } = useDropzoneContext();
  return state === 'reject' ? <div className="dropzone-reject">{children}</div> : null;
};

Dropzone.Idle = ({ children }) => {
  const { state } = useDropzoneContext();
  return state === 'idle' ? <div className="dropzone-idle">{children}</div> : null;
};

Dropzone.Disabled = ({ children }) => {
  const { state } = useDropzoneContext();
  return state === 'disabled' ? <div className="dropzone-disabled">{children}</div> : null;
};

Dot notation helps keep related components organized under a single namespace (Dropzone). It makes the API cleaner and avoids potential naming conflicts since all related components are grouped together.

You only need to import the entire parent component (e.g., Dropzone) to access any of its sub-components, which depending on how you look at it, could be a benefit or a downside. Everything comes with the component without needing to individually import sub-components, but it does increase the bundle size.

Step 3: Use the Dropzone Component

Now let’s see how we can use this Dropzone component in our app.

const App = () => {
  const [dropzoneState, setDropzoneState] = useState('idle');

  return (
    <div>
      <button onClick={() => setDropzoneState('accept')}>Accept</button>
      <button onClick={() => setDropzoneState('reject')}>Reject</button>
      <button onClick={() => setDropzoneState('idle')}>Idle</button>
      <button onClick={() => setDropzoneState('disabled')}>Disabled</button>

      <Dropzone state={dropzoneState}>
        <Dropzone.Accept>File accepted! 😊</Dropzone.Accept>
        <Dropzone.Reject>File rejected! 😢</Dropzone.Reject>
        <Dropzone.Idle>Drag a file here or click to upload.</Dropzone.Idle>
        <Dropzone.Disabled>Dropzone is disabled. 🚫</Dropzone.Disabled>
      </Dropzone>
    </div>
  );
};

export default App;

Advanced Techniques and Tips

1. Default Props

Sometimes, you want to provide a sensible default for your components, but still allow users to customize them if they need to. This makes your components more flexible. For example, you can set a default active tab but still let users override it if they want.

const Tabs = ({ children, defaultTab = 0 }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return <TabsProvider value={{ activeTab, setActiveTab }}>{children}</TabsProvider>;
};

2. Custom Hooks for Context

Creating custom hooks for context logic can simplify usage and improve readability. Checking for context and returning an error can improve the Developer Experience for users.

const useTabs = () => {
  const context = useContext(TabsContext);
  if (!context) {
    throw new Error('useTabs must be used within a TabsProvider');
  }
  return context;
};

3. Dynamic Component Composition

We can dynamically compose compound components based on certain conditions, such as layout direction.

const Tabs = ({ children, vertical = false }) => {
  return <div className={\`tabs \${vertical ? 'vertical' : 'horizontal'}\`}>{children}</div>;
};

4. Enhanced Composition with Render Props

Render props give you a super flexible way to control how your components are rendered. Instead of just passing static content, you can pass a function that returns whatever content you want. This gives you more control over the behavior of your components.

const Tabs = ({ children, defaultTab = 0 }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {typeof children === 'function' ? children({ activeTab, setActiveTab }) : children}
    </TabsContext.Provider>
  );
};

5. TypeScript Integration

Integrating type definitions can enhance our development experience.

interface TabsContextProps {
  activeTab: number;
  setActiveTab: (index: number) => void;
}

const TabsContext = createContext<TabsContextProps | undefined>(undefined);

Real-World Example: Multi-Step Wizard Form

Let's combine everything we've learned to create a multi-step wizard form.

Step 1: Define the Context

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

const WizardContext = createContext();

const WizardProvider = ({ children, initialStep = 0 }) => {
  const [currentStep, setCurrentStep] = useState(initialStep);
  const [isStepValid, setIsStepValid] = useState(true);

  const nextStep = () => isStepValid && setCurrentStep((prev) => prev + 1);
  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 0));
  const validateStep = (isValid) => setIsStepValid(isValid);

  const value = { currentStep, nextStep, prevStep, validateStep };
  return <WizardContext.Provider value={value}>{children}</WizardContext.Provider>;
};

const useWizardContext = () => {
  const context = useContext(WizardContext);
  if (!context) {
    throw new Error('useWizardContext must be used within a WizardProvider');
  }
  return context;
};

Step 2: Create the Compound Components

const Wizard = ({ children, initialStep }) => {
  return <WizardProvider initialStep={initialStep}>{children}</WizardProvider>;
};

Wizard.Step = ({ children, stepIndex, validate }) => {
  const { currentStep, validateStep } = useWizardContext();

  useEffect(() => {
    if (validate) {
      validateStep(validate());
    }
  }, [currentStep, validate, validateStep]);

  return currentStep === stepIndex ? <div className="wizard-step">{children}</div> : null;
};

Wizard.Navigation = () => {
  const { currentStep, nextStep, prevStep } = useWizardContext();
  return (
    <div className="wizard-navigation">
      <button onClick={prevStep} disabled={currentStep === 0}>Back</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
};

Wizard.Summary = ({ children }) => {
  const { currentStep } = useWizardContext();
  return currentStep === -1 ? <div className="wizard-summary">{children}</div> : null;
};

Step 3: Use the Wizard Component

const App = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <Wizard initialStep={0}>
      <Wizard.Step stepIndex={0} validate={() => formData.name !== ''}>
        <h2>Step 1: Basic Information</h2>
        <label>
          Name:
          <input type="text" name="name" value={formData.name} onChange={handleChange} />
        </label>
      </Wizard.Step>

      <Wizard.Step stepIndex={1} validate={() => formData.email !== ''}>
        <h2>Step 2: Contact Information</h2>
        <label>
          Email:
          <input type="email" name="email" value={formData.email} onChange={handleChange} />
        </label>
      </Wizard.Step>

      <Wizard.Step stepIndex={2} validate={() => formData.address !== ''}>
        <h2>Step 3: Address Information</h2>
        <label>
          Address:
          <input type="text" name="address" value={formData.address} onChange={handleChange} />
        </label>
      </Wizard.Step>

      <Wizard.Summary>
        <h2>Summary</h2>
        <p>Name: {formData.name}</p>
        <p>Email: {formData.email}</p>
        <p>Address: {formData.address}</p>
      </Wizard.Summary>

      <Wizard.Navigation />
    </Wizard>
  );
};

export default App;

Conclusion

We've just explored how the Compound Component pattern in React can be a game-changer for building complex, state-driven UIs. By leveraging context and modular sub-components, we can create flexible, maintainable, and intuitive interfaces. This approach ensures clean separation of concerns, easy state management, and dynamic, conditional rendering based on internal state. Whether we're building tabs, dropzones, or multi-step forms, experimenting with these advanced techniques can greatly enhance the functionality and user experience of our React applications. And remember, always keep accessibility in mind!