Containment Pattern

In React, Containment Pattern is a “Parent-Child pattern” that manages the state and logic for a specific section of UI. It involves a parent component that encapsulates one or more child components. The parent component can also pass props to child components, these child components are responsible for presenting the UI based on the props it has received. Containment pattern allows parent component to pass the same logic or data across multiple components that utilzes this data to implement its own render logic or JSX.

Example: This example demonstrates the implementation of Containment Pattern.

Javascript

import React from "react"; 
  
function ParentComponent({ children }) { 
    return <h1>{children}</h1>; 
} 
function ChildComponent() { 
    return <div> I'm a Child Component </div>; 
} 
  
function App() { 
    return ( 
        <ParentComponent> 
            <ChildComponent /> 
        </ParentComponent> 
    ); 
} 
  
export default App;

Output :

React JS Component Composition

Component composition in React involves the inclusion of one or more components in a single component, where each sub-component can further consist of additional components. Components in React are building blocks that are used to create user interfaces (UIs).

Table of Content

What is a Component Composition in React?
How can composition help performance?
Composing Components with props
Higher order components
Render Props pattern
Using Hooks in Component Composition
Context API and Composition
Compound Components
Component Composition Patterns
Containment Pattern
Specialization Pattern
Why Composition Wins Over Inheritance?

Containment Pattern

Javascript

React JS Component Composition

Similar Reads

Contact Us