Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 15, 2020 09:52 am GMT

High-Order Component (HOC) in React

This blogpost continues series of posts exploring React components. It describes High-Order Component, a popular advanced React pattern, to deploy reusable logic across React components.

Introduction and Overview

High-Order Component is NOT a part of React API, it means that there is NO such type as HighOrderComonent. This is a pattern that emerged from Reacts compositional nature. Basically, HOCs are functions that return a component(s). They are used to share logic with other components.

HOCs are common in third-party React libraries, such as Reduxs connect and Relays createFragmentContainer.

Main Features of HOC

  • it receives a component as parameter
  • it returns a component with extended functionalities
  • it doesn't modify or mutate component but creates a new one
  • it creates re-usable logic which can be used multiple times (incorporate the dont-repeat-yourself (DRY) principle of programming)
  • it is mostly used in class-based components

Example:

import React from 'react';// Takes component as argument const higherOrderComponent = (OtherComponent) => {// And returns another component  class HOC extends React.Component {    render() {      return <OtherComponent />;    }  }  return HOC;};
Enter fullscreen mode Exit fullscreen mode

Use Cases

Below is just an overview of some use cases where we can use HOCs and once we get used to using them, it's possible to create more scalable and functional applications.

  1. Display a loader while a component waits for data - it is a good practice to use a loader component (which will show "Loading..." on the screen) in the application, when component is waiting for the data to be loaded through props, or pros are empty. HOC is good for this purpose, it will track the props and give a message accordingly:
function WithLoading(Component) {  return function WithLoadingComponent({ isLoading, ...props }) {    if (!isLoading) return <Component {...props} />;    return <p>Hold on, fetching data might take some time.</p>;  };}export default WithLoading;
Enter fullscreen mode Exit fullscreen mode

2.Conditional rendering - you can put conditional logic inside the HOC easily like this:

const withNullCheck = (Component) => (props) =>  !props.data    ? null    : <Component { ...props } />
Enter fullscreen mode Exit fullscreen mode

3.Providing components with specific styling - we can use specific styles from specific UI states, which is provided by HOC. For example, if the need arises in multiple places for styles like backgroundColor, fontSize and so on, they can be provided via a HOC by wrapping the component with one that just injects props with the specific className:

const HelloComponent = ({ name, ...otherProps }) => ( <div {...otherProps}>Hello {name}!/div>);
Enter fullscreen mode Exit fullscreen mode

Higher order components are actively used in React applications, even though are often difficult to grasp. But practice makes wonders! :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com


Original Link: https://dev.to/olenadrugalya/high-order-component-hoc-in-react-1d1i

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To