Mastering Flexible Component Design in React with the Compound Components Pattern
HidetoshiYanagisawa
Posted on August 5, 2023
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!
Posted on August 5, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
August 5, 2023