React JS Component Composition and Nested Components

React JS Component Composition allows you to build complex UIs by combining smaller, reusable components. Nested Components refer to components that are used within other components, enabling a modular and structured approach to building React applications.

Steps to setup React Application

Step 1: Create a new react app and enter it by running the following commands

npx create-react-app composition-vs-nesting

Step 2: Change the directory

cd composition-vs-nesting

Project Structure:

Updated Dependencies: The updated dependencies in package.json file should look like this.

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Component Composition

Component Composition means combining various other smaller React components in a bigger component so as to create modular architecture in the web application. It breaks the application into smaller reusable components and hence makes the user interface look much more simple.

Example: Illustration to showcase the use of composition component.

// Layout.js

import React from 'react'
import Header from './Header'
import SideBar from './SideBar'
import Footer from './Footer'

const Layout = () => {
  return (
    <div>
        <b>Layout ---</b>
        <Header />
        <SideBar />
        <Footer />
    </div>
  )
}

export default Layout

// Header.js

import React from 'react'

const Header = () => {
  return (
    <div>Header</div>
  )
}

export default Header

// SideBar.js

import React from 'react'

const SideBar = () => {
  return (
    <div>SideBar</div>
  )
}

export default SideBar

// Footer.js

import React from 'react'

const Footer = () => {
  return (
    <div>Footer</div>
  )
}

export default Footer

// App.js

import Layout from "./components/compositionOfComponents/Layout";
import Parent from "./components/nestingComponents/Parent";

function App() {
  return (
    <div>
        <h3>Composition of Components</h3>
        <Layout />
    </div>
  );
}

export default App;

Output :

Nested Component

Nesting of Components creates the parent-child relationship between the nested components. In this approach, children components are nested by including them in the JSX markup of parent component. It helps in organizing the components in proper structure.

Example: Illustration to showcase the use of nested component.

// Parent.js

import React from 'react'
import Child from './Child'

const Parent = () => {
  return (
    <div>
        <b>This is Parent</b>
        <Child />
    </div>
  )
}

export default Parent

// Child.js

import React from 'react'

const Child = () => {
  return (
    <div>Child nested within parent</div>
  )
}

export default Child

// App.js

import Layout from "./components/compositionOfComponents/Layout";
import Parent from "./components/nestingComponents/Parent";

function App() {
  return (
    <div>
        <h3>Nesting of Components</h3>
        <Parent />
    </div>
  );
}

export default App;

Output:

Similarity between component composition and nesting component

• Increases the reusability of components
• Incorporates modularity in web application
• Increases readability of the code
• It eases the code maintainability
• It leads to easy scalability of the application
• It eases the flow of data across the application

Difference between component composition and nesting component