With Higher Order Component

Higher order component is a perfect match for conditional rendering in React. HOC can have multiple use cases. Yet one use case could be to alter the look of a component. To make the use case more specific, it could be to apply a conditional rendering for a component, let's have a look at a HOC that either shows a loading indicator or a desired component.

// HOC declaration
function withLoadingIndicator(Component) {
return function EnhancedComponent({ isLoading, ...props }) {
if (!isLoading) {
return <Component { ...props } />
}
return <div><p>Loading...</p></div>
}
}
// Usage
const ListWithLoadingIndicator = withLoadingIndicator(List)
<ListWithLoadingIndicator
isLoading={props.isLoading}
list={props.list}
/>

In the example above, the List component can focus on rendering the list. It doesn't have to bother with a loading state. Ultimately you could add more HOC to shield away multiple conditional rendering edge cases.