Higher Order Components | Advanced Concepts

Creating and using higher-order components

Higher-order components (HOCs) are a powerful pattern in React for reusing component logic. An HOC is a function that takes a component and returns a new component with additional props or behavior. This tutorial covers how to create and use higher-order components in React, including practical examples and best practices.

Key Points:

A higher-order component (HOC) is a function that takes a component and returns a new component.
HOCs allow you to reuse component logic and abstract common functionality.
Common use cases for HOCs include enhancing components with additional props, state management, and handling side effects.

Creating a Higher-Order Component

To create a higher-order component, you define a function that takes a component as an argument and returns a new component. Here is a simple example of an HOC that adds a new prop to the wrapped component.


// src/hocs/withExtraProp.js
import React from 'react';

const withExtraProp = (WrappedComponent) => {
    return (props) => {
        return <WrappedComponent extraProp="This is an extra prop!" {...props} />;
    };
};

export default withExtraProp;

Using a Higher-Order Component

To use a higher-order component, you wrap your component with the HOC function when exporting it. The HOC adds the extra prop to the component.


// src/components/MyComponent.js
import React from 'react';
import withExtraProp from '../hocs/withExtraProp';

const MyComponent = ({ extraProp }) => {
    return <div>{extraProp}</div>;
};

export default withExtraProp(MyComponent);

Example: Adding Loading State

One common use case for HOCs is adding a loading state to a component. Here is an example of an HOC that adds a loading spinner to a component while data is being fetched.


// src/hocs/withLoading.js
import React from 'react';

const withLoading = (WrappedComponent) => {
    return ({ isLoading, ...props }) => {
        if (isLoading) {
            return <div>Loading...</div>;
        }
        return <WrappedComponent {...props} />;
    };
};

export default withLoading;

// src/components/DataComponent.js
import React, { useEffect, useState } from 'react';
import withLoading from '../hocs/withLoading';

const DataComponent = ({ data }) => {
    return <div>{data}</div>;
};

const DataComponentWithLoading = withLoading(DataComponent);

const DataContainer = () => {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setData('Data fetched!');
            setIsLoading(false);
        }, 2000);
    }, []);

    return <DataComponentWithLoading isLoading={isLoading} data={data} />;
};

export default DataContainer;

Composing Multiple HOCs

You can compose multiple HOCs to enhance a component with several pieces of functionality. This is done by nesting the HOCs when wrapping the component.


// src/hocs/withExtraProp.js
import React from 'react';

const withExtraProp = (WrappedComponent) => {
    return (props) => {
        return <WrappedComponent extraProp="This is an extra prop!" {...props} />;
    };
};

export default withExtraProp;

// src/hocs/withLoading.js
import React from 'react';

const withLoading = (WrappedComponent) => {
    return ({ isLoading, ...props }) => {
        if (isLoading) {
            return <div>Loading...</div>;
        }
        return <WrappedComponent {...props} />;
    };
};

export default withLoading;

// src/components/EnhancedComponent.js
import React, { useEffect, useState } from 'react';
import withExtraProp from '../hocs/withExtraProp';
import withLoading from '../hocs/withLoading';

const EnhancedComponent = ({ data, extraProp }) => {
    return (
        <div>
            <p>{extraProp}</p>
            <p>{data}</p>
        </div>
    );
};

const EnhancedComponentWithHOCs = withExtraProp(withLoading(EnhancedComponent));

const EnhancedContainer = () => {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setData('Data fetched!');
            setIsLoading(false);
        }, 2000);
    }, []);

    return <EnhancedComponentWithHOCs isLoading={isLoading} data={data} />;
};

export default EnhancedContainer;

Best Practices

Here are some best practices for using higher-order components in your React applications:

Use HOCs to abstract and reuse component logic.
Keep HOCs simple and focused on a single piece of functionality.
Compose multiple HOCs for complex functionality by nesting them.
Avoid overusing HOCs; consider other patterns like hooks or render props for certain use cases.
Name HOCs clearly to indicate their purpose and the functionality they add.

Summary

In this tutorial, you learned about creating and using higher-order components (HOCs) in React. HOCs are a powerful pattern for reusing component logic and abstracting common functionality. By creating HOCs, using them to wrap components, and following best practices, you can build more maintainable and reusable React applications.

React - Higher-Order Components