Los componentes de orden superior (HOC) son un patrón poderoso y popular en React que le permite reutilizar la lógica entre los componentes. Los HOC son funciones que toman un componente y devuelven un nuevo componente con funcionalidad adicional. En este artículo, exploraremos qué son los HOC, por qué son útiles y cómo crearlos con un ejemplo.

¿Qué son los componentes de orden superior?

En React, los componentes son los componentes básicos de su aplicación. Son responsables de representar los elementos de la interfaz de usuario y administrar el estado. Los componentes de orden superior (HOC) son funciones que toman un componente como argumento y devuelven un nuevo componente con funcionalidad adicional. Los HOC no modifican el componente original, sino que crean un nuevo componente que lo envuelve.

El concepto de HOC se basa en la idea de funciones de orden superior en la programación funcional. En la programación funcional, las funciones de orden superior son funciones que toman otras funciones como argumentos o devuelven funciones como resultados. De manera similar, los HOC toman componentes como argumentos y devuelven nuevos componentes como resultados.

¿Por qué utilizar componentes de orden superior?

Los HOC son un patrón poderoso en React que puede ayudarlo a reutilizar la lógica entre los componentes. Los HOC son especialmente útiles en las siguientes situaciones:

1. Reutilización de código:
   si tiene varios componentes que comparten la misma lógica, puede usar un HOC para extraer esa lógica en una función separada y reutilizarla en todos los componentes.
2. Abstracción:
   los HOC pueden abstraer los detalles de implementación y hacer que su código sea más modular y más fácil de mantener.
3. Composición:
   los HOC se pueden usar para componer múltiples comportamientos en un solo componente.

Crear un HOC es fácil. Simplemente crea una función que toma un componente como argumento y devuelve un nuevo componente con funcionalidad añadida. Echemos un vistazo a un ejemplo:

import React from "react";

const withLoading = (WrappedComponent) => {
  class WithLoading extends React.Component {
    state = {
      isLoading: true
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      const { isLoading } = this.state;

      if (isLoading) {
        return <div>Loading...</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  }

  return WithLoading;
};

export default withLoading;

Para usar el HOC, simplemente envolvemos el componente que queremos mejorar con la withLoadingfunción:

import withLogging from "./LoadingWraper";

const App = () => {
  return (
    <div className="App">
      <div>Hello, World!</div>
    </div>
  );
};
export default withLogging(App);

Conclusión:

Los HOC son un patrón poderoso en React que le permite reutilizar la lógica entre los componentes. Los HOC son especialmente útiles cuando tiene varios componentes que comparten la misma lógica, o cuando desea abstraer los detalles de implementación y hacer que su código sea más modular y más fácil de mantener. Crear un HOC es fácil, simplemente crea una función que toma un componente como argumento y devuelve un nuevo componente con funcionalidad adicional.

Enlace de CodeSandBox : -https://codesandbox.io/s/vigorous-rhodes-mgc8z4

Conéctate conmigo en la red social

✅ Github:https://github.com/surksharathi
✅ LinkedIn:https://www.linkedin.com/in/suraksha-singh-88350472/
✅ Gorjeo:https://twitter.com/SurakshaSogaria