High order component React js

In React, a higher-order component (HOC) is a function that takes in a component and returns a new component with enhanced functionality. HOCs are a way to reuse and share code among React components that have similar functionality.

The returned component from a HOC can have additional props, state, or behavior, making it more flexible and reusable across multiple components. HOCs can be used to abstract away common functionality such as state management, lifecycle methods, or handling authentication, and can help to keep code DRY (Don't Repeat Yourself).

HOCs are commonly used in large-scale React applications to improve code reusability and reduce code duplication. They are a powerful tool for creating modular and composable code in React.

Example

In this example we have two components Random1.tsx and Random2.tsx , each component will return a random number between 1 and 100 .

Random1.tsx

import React, { useState } from "react";

type Props = {};

const Random1 = (props: Props) => {
  const [random, setRandom] = useState(0);
  const handleRand = () => {
    setRandom(Math.floor(Math.random() * 100));
  };
  return (
    <div>
      <h1>Mihed random number {random}</h1>
      <button onClick={() => handleRand()}>reroll</button>
    </div>
  );
};

export default Random1;

Random2.tsx

import React, { useState } from "react";

type Props = {};

const Random2 = (props: Props) => {
  const [random, setRandom] = useState(0);
  const handleRand = () => {
    setRandom(Math.floor(Math.random() * 100));
  };
  return (
    <div>
      <h1>Foued random number {random}</h1>
      <button onClick={() => handleRand()}>reroll</button>
    </div>
  );
};

export default Random2;

As we can see the two components looks the same . HOC provide a solution to not repeat the same logic a cross many components .

Solution

We create a component called UpdatedComponents.tsx

import React, { useState } from "react";

function UpdatedComponents(ReturnedComponent) {
  function newComponent() {
    const [random, setRandom] = useState(0);
    const handleRand = () => {
      setRandom(Math.floor(Math.random() * 100));
    };
    return <ReturnedComponent random={random} handleRand={handleRand} />;
  }
  return newComponent;
}

export default UpdatedComponents;

We write the logic for the two previous components in a function inside a new function we can call it newComponent() with ReturnedComponent as returned value and passing the parameters needed as props .

Random1.tsx

import React from "react";
import UpdatedComponents from "./UpdatedComponents";

type Props = {
  random: number;
  handleRand: () => void;
};

const Random1 = ({ random, handleRand }: Props) => {
  return (
    <div>
      <h1>Mihed random number {random}</h1>
      <button onClick={() => handleRand()}>reroll</button>
    </div>
  );
};

export default UpdatedComponents(Random1);

Random2.tsx

import React from "react";
import UpdatedComponents from "./UpdatedComponents";

type Props = {
  random: number;
  handleRand: () => void;
};

const Random2 = ({ random, handleRand }: Props) => {
  return (
    <div>
      <h1>Mihed random number {random}</h1>
      <button onClick={() => handleRand()}>reroll</button>
    </div>
  );
};

export default UpdatedComponents(Random2);

Now the two components shares thier logic in a higher level reducing the repetition and now Random1 and Random2 only renders the result.