Mastering Flexible Component Design in React with the Compound Components Pattern

Table of Contents

• Introduction
• What is the Compound Components Pattern?
• Example Using Compound Components
• Example Without Using Compound Components
• Comparison and Benefits
• Conclusion

Introduction

In React, component design is crucial. The Compound Components pattern that we are introducing here is a powerful technique for clarifying relationships between components and enhancing reusability.

What is the Compound Components Pattern?

The Compound Components pattern is a design pattern that allows flexible control between parent and child components. Child components receive properties from the parent and function individually.

Example Using Compound Components

Tabs.js

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

const TabContext = createContext(); // Creating context

export const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0); // State for the active tab

  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      <div>{children}</div> // Rendering child components
    </TabContext.Provider>
  );
};

export const Tab = ({ title, children }) => {
  const { activeTab, setActiveTab } = useContext(TabContext); // Getting the state from the parent
  const isActive = activeTab === title; // Checking if the tab is active

  return (
    <div>
      <button onClick={() => setActiveTab(title)}>{title}</button>
      {isActive && <div>{children}</div>} // Display content only if active
    </div>
  );
};

In this example, the Tabs component is the parent, and the Tab component is the child. The parent holds the current active tab's state and passes it to the child through context. The child component checks whether the tab is active and displays the content accordingly.

Example Without Using Compound Components

Tabs.js

import React, { useState } from 'react';

export const Tabs = ({ titles, children }) => {
  const [activeTab, setActiveTab] = useState(0); // State for the active tab

  return (
    <div>
      {titles.map((title, index) => (
        <button onClick={() => setActiveTab(index)} key={index}>
          {title}
        </button>
      ))}
      {children[activeTab]} // Displaying content for the active tab
    </div>
  );
};

In this design, the titles and content of the tabs are separated, and the Tabs component controls all the logic. Child components are merely displayed and do not exist as independent entities.

Comparison and Benefits

• Flexibility: Using Compound Components allows for a more flexible design.
• Reusability: Each child component is independent, making them easier to reuse.
• Readability: The relationship between components is clear, improving code readability.
• Maintenance: Maintenance is easier.

Conclusion

The Compound Components pattern is a fantastic technique to enhance React component design. Through this article, master this powerful pattern and advance your development of more sophisticated React applications!

If you like this post or have any questions or comments, please feel free to leave them in the comment section below!