React JS

ReactJS - Higher order Components

ReactJS - Higher order Components

● Higher Order Components (HOCs) are advanced React components that are designed to wrap other components and provide them with additional functionality. 
● HOCs can be thought of as reusable pieces of code that allow developers to quickly add features such as data fetching, state management, or even authentication without having to write it all from scratch each time. 
● They also provide a way for developers to easily separate concerns by abstracting out common logic into its own component, which can then be reused in multiple places throughout an application. This helps keep the codebase more organized and extensible over time – reducing the risk of errors being introduced due to lack of maintenance. Furthermore, since HOCs rely on composition instead of inheritance they’re much easier for beginners to grasp compared with traditional object-oriented programming principles like classes and objects. 

Finally, higher order components offer a great opportunity for experienced React developers who want to share their knowledge with others by creating their own custom wrappers that can be used across different projects and teams. 

A higher-order component allows you to reuse component logic and props between components. 

Here is an example of how to create a higher-order component that adds a new prop to a component: 

const withName = (WrappedComponent) => { 
return class extends React.Component { 
render() { 
return <WrappedComponent name="John" {...this.props} /> 
} 
} 
} 
class MyComponent extends React.Component { 
render() { 
return <div>My name is {this.props.name}</div> 
} 
} 
const MyComponentWithName = withName(MyComponent) 

In this example, the withName HOC is a function that takes a component as an argument and returns a new component. The new component has an additional prop name added to it. The prop name is passed to the wrapped component using the spread operator. 
Another example is a HOC that conditionally renders a component depending on the user's role. 

const withRoleCheck = (WrappedComponent) => { 
return class extends React.Component { 
render() { 
const { userRole, ...rest } = this.props 
if (userRole === 'admin') { 
return <WrappedComponent {...rest} /> 
} else { 
return <div>You do not have permission to access this page</div> 
} 
} 
} 
} 
class AdminPage extends React.Component { 
render() { 
return <div>Welcome to the admin page</div> 
} 
} 
const AdminPageWithRoleCheck = withRoleCheck(AdminPage) 

In this example, the withRoleCheck HOC is a function that takes a component as an argument and returns a new component. The new component checks the user's role prop and conditionally renders the wrapped component or an access denied message. 
 

Top course recommendations for you

    ETTTYGGEGERGERWG1342SFGDFG
    1 hrs
    Intermediate
    762 Learners
    4.5  (8)
    MySQL Basics
    5 hrs
    Beginner
    37.7K+ Learners
    4.46  (14006)
    Introduction to Python
    4 hrs
    Beginner
    1.5K+ Learners
    4.82  (39)
    Linked List in C
    1 hrs
    Beginner
    1.1K+ Learners
    Introduction to JUnit
    2 hrs
    Beginner
    1.6K+ Learners
    4.55  (118)
    Introduction to Spring Cloud
    2 hrs
    Beginner
    731 Learners
    4.5  (62)
    Computational Thinking for Programming
    2 hrs
    Beginner
    887 Learners