Reusable logic with React HOC
Tags: webdev, tutorial, react, javascript
Published: 2020-06-23 09:42:30

In the previous post, I've covered [Reusable logic with React Render Props ](https://dev.to/max_frolov_/reusable-logic-with-react-render-props-2nbg).

This time I will tell you how:
a) to use HOC correctly and which cases it should be used in;
b) to take out the logic that can be reused in other components.

Thanks to the HOC (higher-order component) pattern we can easily create "modules" that can both accept options for internal use and passing additional functionality. This functionality will help to implement many things without describing the same logic within each component where it is used.

So HOC is a higher-order component aka a higher-order function which takes __a component as an argument__ and __returns another component__. The returned component render will contain the passed component but with more advanced functionality.

>It is important to pass the received props inside the <code>EnhancedComponent</code> further to the <code>ComposedComponent</code>. Otherwise, all props that we will pass externally will remain closed at the <code>EnhancedComponent</code> level.

####The main tasks of HOC are:####
a) to expand the functionality of the wrapped component;
b) to store logic that can be reused.

A brief description of the HOC can be written as follows:
<code>(component) => (props) => { ...logic return extendedComponent }</code>.

##How to understand the moment to use HOC has come?##
Let's imagine we have two pages for a registered user.

On every page we need:
a) to understand whether the user is authorized in the system;
b) to obtain user profile data if authorized.

As a comparison let's firstly write logic without using HOC.

*First page:*
```jsx
const PageFirst = () => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)
    const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
  
    React.useEffect(() => {
      handleGetUser()
    }, [])
  
    const handleGetUser = async () => {
      try {
        setUserLoadingState(true)
  
        const response = await getUser()
  
        setUserProfile({ isAuthorized: true, data: response.data })
      } catch (error) {
        console.log('Error while User preload:', error)
      } finally {
        setUserLoadingState(false)
      }
    }
  
    if (!userProfile.isAuthorized && !isUserLoading) {
      return <div>U're not authorized</div>
    }
  
    return (
      <div>
        {isUserLoading ? (
          <div>Loading...</div>
        ) : (
          <>
            <div>Your First Name: {userProfile.data.firstName}</div>
            <div>Your Last Name: {userProfile.data.lastName}</div>
          </>
        )}
      </div>
    )
  }
```
*Second page:*
```jsx
const PageSecond = () => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)
    const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
  
    React.useEffect(() => {
      handleGetUser()
    }, [])
  
    const handleGetUser = async () => {
      try {
        setUserLoadingState(true)
  
        const response = await getUser()
  
        setUserProfile({ isAuthorized: true, data: response.data })
      } catch (error) {
        console.log('Error while User preload:', error)
      } finally {
        setUserLoadingState(false)
      }
    }
  
    if (!userProfile.isAuthorized && !isUserLoading) {
      return <div>U're not authorized</div>
    }
  
    return (
      <div>
        {isUserLoading ? (
          <div>Loading...</div>
        ) : (
          <div>
            Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
          </div>
        )}
      </div>
    )
  }
```
####As we see in the example above we can take out:####
a) a function to obtain a user;
b) a state of <code>userProfile</code> and <code>isUserLoading</code>;
c) repeating condition for rendering a message the user is not authorized and a user loading message. (message about user loading)

Let's try to move these elements to the HOC (<code>withAuth</code>). Usually, the prefix __“with”__ is used in the name of the HOC.

*HOC withAuth:*
```jsx
const withAuth = ComposedComponent => {
    const EnhancedComponent = (props) => {
      // state
      const [isUserLoading, setUserLoadingState] = React.useState(false)
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
  
      React.useEffect(() => {
        handleGetUser()
      }, [])
  
      const handleGetUser = async () => {
        try {
          setUserLoadingState(true)
  
          const response = await getUser()
  
          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          setUserLoadingState(false)
        }
      }
  
      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }
  
      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...props} userProfile={userProfile} />}</>
    }
  
    return EnhancedComponent
  }
  
  const PageFirst = withAuth(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))
  
  const PageSecond = withAuth(({ userProfile }) => (
    <div>
      Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
    </div>
  ))
```
Now we have <code>HOC withAuth</code> which took upon all the logic of getting <code>userProfile</code>. In order to get profile data inside the component, it is enough to wrap our component in <code>withAuth</code>. Optimization helped us to reduce the code by almost half: from 80 rows to 47.

In order to pass additional parameters to the HOC you need to use a higher-order function.

Short description:
<code>(...arguments) => (component) => (props) => { ...logic return extendedComponent }</code>.

*Example of parameter passing to HOC:*
```jsx
// higher order functions
  const withAuth = (options = { isAdmin: false }) => ComposedComponent => {
    const EnhancedComponent = (props) => {
      // state
      const [isUserLoading, setUserLoadingState] = React.useState(false)
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
  
      React.useEffect(() => {
        handleGetUser()
      }, [])
  
      const handleGetUser = async () => {
        try {
          setUserLoadingState(true)
  
          const response = await getUser(options.isAdmin)
  
          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          setUserLoadingState(false)
        }
      }
  
      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }
  
      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...props} userProfile={userProfile} />}</>
    }
  
    return EnhancedComponent
  }
  
  // passing options
  const PageFirst = withAuth({ isAdmin: true })(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))
```
Certainly, it is possible not to create another function and pass options by a second argument on the first call together with the component. But this will not be quite correct from the composition point of view.

In the case of HOC it is better not to mix the component transfer along with the options but to separate them by passing them to each function separately. This is a more flexible option since we can close certain options and use HOC by passing the necessary parameters to it in advance.

*Example of parameter closure in HOC:*
```jsx
const withAuthAdmin = withAuth({ isAdmin: true })
  const withAuthDefault = withAuth({})
  
  const PageFirst = withAuthAdmin(({ userProfile }) => (
    <>
      <div>Your First Name: {userProfile.data.firstName}</div>
      <div>Your Last Name: {userProfile.data.lastName}</div>
      <div>Is Authorized: {userProfile.isAuthorized ? 'Yes' : 'No'}</div>
    </>
  ))
  
  const PageSecond = withAuthDefault(({ userProfile }) => (
    <div>
      Your Full Name: {userProfile.data.firstName} {userProfile.data.lastName}
    </div>
  ))
```
###The HOC can also return a component wrapped in another HOC.###
When we turn the <code>EnhancedComponent</code> to the HOC we will access all the functionality of the HOC inside the <code>EnhancedComponent</code>, through props. Then we can decide whether to pass it to the <code>ComposedComponent</code> or not.

*Example of using HOC inside HOC:*
```jsx
const withLoadingState = ComposedComponent => props => {
    // state
    const [isUserLoading, setUserLoadingState] = React.useState(false)
  
    const handleSetUserLoading = value => {
      setUserLoadingState(value)
    }
  
    return <ComposedComponent {...props} isUserLoading={isUserLoading} handleSetUserLoading={handleSetUserLoading} />
  }
  
  const withAuth = ComposedComponent => {
    const EnhancedComponent = ({ isUserLoading, handleSetUserLoading, ...rest }) => {
      // state
      const [userProfile, setUserProfile] = React.useState({ isAuthorized: false, data: {} })
  
      React.useEffect(() => {
        handleGetUser()
      }, [])
  
      const handleGetUser = async () => {
        try {
          handleSetUserLoading(true)
  
          const response = await getUser()
  
          setUserProfile({ isAuthorized: true, data: response.data })
        } catch (error) {
          console.log('Error while User preload:', error)
        } finally {
          handleSetUserLoading(false)
        }
      }
  
      if (!userProfile.isAuthorized && !isUserLoading) {
        return <div>U're not authorized</div>
      }
  
      return <>{isUserLoading ? <div>Loading...</div> : <ComposedComponent {...rest} userProfile={userProfile} />}</>
    }
  
    // here we wrap EnhancedComponent with HOC
    return withLoadingState(EnhancedComponent)
  }
```
I believe after reading this post you will think where you could use HOC in your current or future project.

More tips and best practices on my [Twitter](https://twitter.com/max_frolov_).
More tutorials [here](https://dev.to/max_frolov_).

Feedback is appreciated. Cheers!