ReactJS Component Composition
Last Updated :
20 Feb, 2025
In React, it becomes difficult to manage the complex UI components and maintain the code. With the help of Component Compositions, we can solve this problem by combining the components into a single component.
What is Component Composition?
Component composition in React includes 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).
It provides the following advantages
- Reusability: In the different parts of the application, the components can be reused.
- Maintainability: In the application, it is easier to update and manage the code.
- Improved Readability: Smaller, focused components are easier to understand and debug.
JavaScript
import React from "react";
const Header = () => <header><h1>Welcome to My Website</h1></header>;
const Content = () => <main><p>This is the main content section.</p></main>;
const Footer = () => <footer><p>© 2024 My Website</p></footer>;
const App = () => {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
};
export default App;
Output
Component CompositionIn this example
- The app component consists of three smaller components.
- The header, Content, and Footer are independent components resides under the app component
Techniques for Component Composition
Containment (Children Props)
This is mainly used when we are building reusable wrapper components.
JavaScript
// App.js
import React, { } from 'react'
function App() {
const Box1 = {
backgroundColor: "blue",
color: "white",
padding: "10px 20px",
width: "20px",
height: "50px",
};
const Box2 = {
backgroundColor: "red",
color: "white",
padding: "12px 25px",
width: "30px",
height: "50px",
};
return (
<div >
<Box text="Box1" style={Box1} />
<Box text="Box2" style={Box2} />
</div>
);
}
export default App;
JavaScript
// Box.js
import React from 'react'
function Box(props) {
return (
<div style={props.style}>
{props.text}
</div>
)
}
export default Box
Output

In this example
- The App component renders two <Box /> components and passes the text and style props to them.
- The Box component receives props.style and props.text and applies the style dynamically while displaying the text inside a <div>.
- The Box component is generic, meaning it can be used multiple times with different styles and text, improving reusability and maintainability.
Specialization (Props-based Composition)
A specialized version of a component is created by passing props, allowing flexibility in UI design.
JavaScript
import React from "react";
function ChildComponent({ data }) {
return (
<div>
{data}
<div>I'm a Child Component</div>
</div>
);
}
function ParentComponent() {
const data = "I'm a parent component";
return (
<ChildComponent data={data} />
);
}
function App() {
return (
<ParentComponent />
);
}
export default App;
Output

In this example
- The ParentComponent defines a data variable ("I'm a parent component") and passes it as a prop to ChildComponent.
- The ChildComponent receives the data prop and displays it inside a <div>, followed by another <div> with the text "I'm a Child Component".
- The execution starts from App, which calls ParentComponent, and ParentComponent then calls ChildComponent, passing down the data prop to be displayed.
Higher-Order Components (HOCs)
HOCs are functions that take a component as input and return an enhanced component. This technique is used for reusing component logic.
JavaScript
// App.js
import React from 'react';
import HigherOrder from './HigherOrder';
function App(props) {
return <h1>{props.newprop}</h1>
}
export default HigherOrder(App)
JavaScript
// HigherOrder.js
function HigherOrder(OldComponent) {
return function NewComponent(props) {
return <OldComponent
{...props} newprop="I'm the newly added prop" />;
};
}
export default HigherOrder;
Output

In this example
- The HigherOrder function take App as an argument, modify its props (e.g., adding newprop), and return an enhanced version of App.
- Inside App, the modified prop (newprop) is accessed and displayed inside an <h1> tag.
- Instead of exporting App directly, it is exported as HigherOrder(App).
- It gets processed by the HOC before being used in the application.
Render Props
They give the more control over rendering by allowing components to pass a function as a prop.
JavaScript
// App.js
import React from 'react';
import JsxReceiver from './JsxReceiver.js'
function App() {
return (
// JsxReceiver is a Wrapper Component
<JsxReceiver render={data => (
<h1>{data}</h1>
)} />
);
}
export default App;
JavaScript
import React from 'react'
function JsxReceiver({ render }) {
let data = "Welcome to GeeksforGeeks";
return render(data);
}
export default JsxReceiver
Output

In this example
- The JsxReceiver component is used as a wrapper that takes a render prop, which is a function returning JSX.
- The render prop allows App to pass a function to JsxReceiver, which receives data and returns an <h1> element displaying that data.
- JsxReceiver will call the function provided in the render prop and pass a value (data), allowing the rendering logic to be controlled dynamically.
- JsxReceiver follows the Render Prop Pattern, it can be reused with different render functions to handle various UI needs flexibly.
Use Cases of Component Composition
- Building Layout Components: It is useful in creating reusable layout structures like headers, footers, etc.
- State Management: Composition helps in managing a state efficiently by keeping it at the right level and passing it down via props.
- Form Handling: Forms with dynamic fields and validation rules can be composed of child components.
- Modularizing Large Applications: Component Composition enables breaking down large applications into smaller, maintainable components.
Similar Reads
ReactJS Functional Components In ReactJS, functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.What are Reactjs Functio
5 min read
ReactJS Pure Components ReactJS Pure Components are similar to regular class components but with a key optimization. They skip re-renders when the props and state remain the same. While class components are still supported in React, it's generally recommended to use functional components with hooks in new code for better p
4 min read
React MUI Components React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o
4 min read
React Components In React, React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI.In this article, we will explore the basics of React components, props, state, and render
4 min read
How to create components in ReactJS ? Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read