Higher Order Components

• Design pattern in React that are functions but take in a component as input and returns a new componenet with extra functionality.

• Example

    export default const doLoading = (wrappedComponent) => {
        return (props) => {
            const [isLoading,setLoading] = useState(false)
            const setLoadingState = (isLoading) => {
                setLoading(isLoading);
            }
            return <wrappedComponent></wrappedComponent>
        }
    }

• To use this HOC

    import doLoading from './loadingFile';

    const Component = ({isLoading,setLoading}) => {
        //do stuff with props
        //Extra functionality here
    }

    export default doLoading(Component);
    //Now you can use doLoading with the functionality introduced in this file