Render Props pattern
The Render Prop pattern in React involves passing a function as a prop to a component, which returns a React element. Instead of implementing its own rendering logic, the component calls this function. This pattern enables sharing and reusing rendering logic across multiple components. It’s particularly useful when a component possesses data but lacks the JSX definition to render it. In such cases, a parent component passes a function with JSX structure as a prop to the child component, which utilizes this function to render JSX.
Example : This example demonstrates the implementation of Rendering props in React.
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 w3wiki" ; return render(data); } export default JsxReceiver |
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