ReactJs Higher-Order Components

Heading h1

ReactJs Higher-Order Components

Syntax

const higherOrderComponent = (WrappedComponent) => {
  return class HOC extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}

In the above code snippet, higherOrderComponent is a function that takes a component (WrappedComponent) as an argument and returns a new component (HOC) that wraps the WrappedComponent.

Example

import React from 'react';

const withLoading = (WrappedComponent) => {
  return class HOC extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isLoading: true };
    }

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      return this.state.isLoading ? <h1>Loading...</h1> : <WrappedComponent {...this.props} />;
    }
  }
};

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

const MyComponentWithLoading = withLoading(MyComponent);

export default MyComponentWithLoading;

In the above code snippet, we have defined a higher-order component called withLoading that takes a component (WrappedComponent) and returns a new component (HOC). The HOC component renders a loading message until the WrappedComponent has finished loading.

Output

The output of the above example will be a loading message (<h1>Loading...</h1>) for 2 seconds followed by the MyComponent component (<h1>Hello, World!</h1>).

Explanation

Higher-order components are functions that take a component and return a new component. In the example above, we have defined a higher-order component called withLoading that takes a component (WrappedComponent) and returns a new component (HOC). In the HOC component, we have added a loading state (isLoading) and a componentDidMount lifecycle method to simulate loading. The render method of the HOC component then checks the isLoading state and either renders the WrappedComponent or a loading message.

Use

Higher-order components can be used to add functionality to an existing component. Use cases for higher-order components include:

• Adding state and behavior to a component
• Restricting access to a component based on authentication
• Providing data to a component through props

Important Points

• Higher-order components are functions that take a component and return a new component.
• Higher-order components are a common pattern in React for adding functionality to components.
• Higher-order components should be used judiciously, as they can increase complexity and reduce code readability.
• When using higher-order components, it's important to consider the impact on component performance.

Summary

Higher-order components are functions that take a component and return a new component. They can be used to add functionality to an existing component, such as state and behavior. Higher-order components should be used with caution, as they can introduce complexity and reduce code readability. When using higher-order components, it's important to consider the impact on component performance.