Handle loadings in React by using Higher Order Components

Higher Order Components in React

Before you read this article, read React’s official document on HOCs if you haven’t read it yet.

Pretty much in any React application, you call an API to fetch some data and use them to render some content in your application.
Since UI components need to show some kind of progress bar, loading indicator, etc to tell users that data is being fetched, it may be cumbersome to implement loading logic in every single component and to pass a loading property from your redux store or your local state to child components.
In order to make this situation easier, React proposes Higher Order Components to shield away repetitive code snippets and be generic as much as you can.

Higher Order Component (HOC)

A higher order component or HOC as you may face a lot surfing through the web, is a function that accepts your component as an argument and returns a new function that adds some feature to the component. A sharp example of it is the Connect HOC in React-Redux library that makes your store model available as props to your components and containers.

Loading a List

For instance, assume we are fetching a list of a developer’s repositories from Github using its open API. We tend to handle list loading so that our clients wouldn’t panic when the API is taking so much time to respond.

A basic List component can be written as:

import React from 'react';
const List = props => {
  const { repos } = props;
  
  if (!repos) return null;
  if (!repos.length) return (<p>No repos, sorry</p>)
  return (
    <ul>
      {
        repos.map(repo => {
          return (
            <li key={repo.id}>{repo.full_name}</li>
          )
         })
       }
    </ul>
  )
}
export default List;

Now, let’s write the HOC to handle loadings:

import React from 'react';
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return (<Component {...props} />);
    return (<p>Be Hold, fetching data may take some time :)</p>);
  }
}
export default WithLoading;

Now in your container such as App.js , you could easily pass loading logic to WithLoading without being worried about it in your List .

Put it into Action

import React from 'react';
import List from './List.js';
import WithLoading from './WithLoading.js';
const ListWithLoading = WithLoading(List);
class App extends React.Component {
  state = {
    loading: false,
    repos: null
  }
  componentDidMount() {
    this.setState({ loading: true });
    fetch(`https://api.github.com/users/farskid/repos`)
      .then(json => json.json())
      .then(repos => {
        this.setState({ loading: false, repos: repos });
      });
  }
render() {
    return (
      <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />
    )
  }
}

Wrap it Up

we did see that using an HOC really makes it easier to deal with loadings in UI and fades out all those manual if-else statements in every single component that is rendering a data from the API.

Have Fun.