Specialization Pattern
The specialization pattern is also known as “Inheritance pattern” that creates a new component by inheriting the props of a base component. The new component either adds some new functionalities or overrides the functinalities which are present in it and implements it own render logic.
Example : This example demonstrates implementation of specialized pattern.
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:
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?
Contact Us