HOC en React.js: ¬ŅC√≥mo utilizar los High Order Component (HOC) ?

Inicio‚Äļreact js‚ÄļHigher Order Component
HOC en React.js: ¬ŅC√≥mo utilizar los High Order Component (HOC) ?

by Juan Carlos García

3-Mzo-2023

(4)

Suscribirme al canal:

Bienvenido viajero, espero que mi curso de React JS te este siendo de gran ayuda, hoy traigo un nuevo episodio donde te mostrare como utilizar los HOCs conocidos así por sus siglas en ingles Higher Order Component.

Como siempre lo har√© a trav√©s de un ejemplo que espero ilustre correctamente el ¬ŅPor qu√© y para qu√© de este tipo de componente?

  • Te invito a revisar el cap√≠tulo anterior donde te hable de la comunicaci√≥n de componentes mediante API Context.

Bien, no olvides en suscribirte a mi canal en YouTube con lo cual apoyar√°s este curso.

¬°No te puedes perder las nuevas clases ūüßź!

React JS

React JS

React.js: El mejor curso gratuito de React.js desde cero.

¬ŅQue es React JSX?

¬ŅQue es React JSX?

Gu√≠a para principiantes de React JSX: ¬ŅQu√© es React JSX? Introducci√≥n a React JSX

Componentes y propiedades

Componentes y propiedades

Components and Props React.js, Manejo de propiedades y componentes en React

State y Ciclo de vida en React

State y Ciclo de vida en React

State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

Refs React

Refs React

¬ŅQu√© son las React Refs y para que sirven? Uso de las Refs y manejo del DOM en React.js

Listas y condiciones en React

Listas y condiciones en React

Keys and List: ¬ŅC√≥mo manejar las listas y condicionales en React JS?

Formularios en React

Formularios en React

Formularios en React: ¬ŅC√≥mo manejar los formularios en React.js con input controlados y no controlados?

React develepor tools

React develepor tools

React Developer Tools: ¬ŅC√≥mo analizar el comportamiento y estado de nuestros componentes en React.js?

API Context

API Context

API Context en React: ¬ŅC√≥mo comunicar componentes mediante API Context en React.js?

Higher Order Component

Higher Order Component

HOC en React.js: ¬ŅC√≥mo utilizar los High Order Component (HOC) ?

Children en React JS

Children en React JS

Children en React.js: Manejo avanzado de Children en React.js, composición de componentes.

PropTypes en React

PropTypes en React

PropType en React.js: ¬ŅC√≥mo validar datos a trav√©s de PropType en React.js?

Hooks en React JS

Hooks en React JS

Master de Hooks en React JS: ¬ŅQu√© es un Hook en React.js? Tipos, funcionamiento y caracter√≠sticas.

Hook useState

Hook useState

useState: ¬ŅC√≥mo utilizar el Hook useState en React.js?

Hook useEffect

Hook useEffect

Hook useEffect: ¬ŅQu√© es el Hook useEffect? ¬ŅC√≥mo utilizarlo correctamente y qu√© reglas seguir?

Hook useContext

Hook useContext

¬ŅC√≥mo utilizar el Hook useContext? Comunicaci√≥n de componentes funcionales

Hook useReducer

Hook useReducer

¬ŅC√≥mo utilizar el Hook useReducer en React.js?

React memo

React memo

Memorizar componentes a través de React.memo en React.js

Hook useCallback

Hook useCallback

Utilizando los Hooks useCallback y useMemo en React.js

ūüßź Autoevaluaci√≥n: Higher Order Component

¬ŅQu√© son los Higher Order Components HOC en React?

¬ŅPara qu√© sirven los HOC?

Son ejemplos de HOC:

¬ŅQu√© aprender√°s de los HOCs?

  • ¬ŅQu√© son y para qu√© sirven?
  • Como declararlos.
  • Como envolver componentes mediante tu HOC.
  • Comunicaci√≥n componente padre a hijo.
  • Comunicaci√≥n componente hijo a padre.

Repositorio:

  • Puedes acceder al c√≥digo descargando lo directamente aqu√≠ "hoc".
  • O puedes clonar el repositorio con los siguientes comandos, el c√≥digo se encuentra en la rama "hoc".
git clone https://github.com/EWebik/react-js.git
git checkout hoc

 

¬ŅQu√© son los Higher Order Components HOCs en React?

Lo primero que debes saber es que los HOCs no forman parte de la API de React como tal, más bien, son una especie de patrón que es resultante de la misma lógica de componentes de la librería de React.

No obstante, te dejo una definición que te puede ayudar a comprender mejor qué son.

Técnicamente es una función con la capacidad de recibir un componente como entrada y regresar un componente nuevo como salida.

 

¬ŅPara qu√© sirven los HOCs?

Utilizar HOCs es considerado una técnica avanzada de React, que permite reutilizar lógica y trasmitirla a nuestros componentes que conformen nuestro proyecto.

En pocas palabras mientras la mayoría de componentes convierten propiedades a interfaz de usuario:

Los HOCs transforman un componente en otro componente agregando información a sus propiedades.

Entonces, mediante un HOC podemos reutilizar lógica y transmitirla a los componentes que serán envueltos con nuestro HOC.

 

Librerías de terceros que utilizan HOC

Muchas librerías de terceros utilizan esta técnica, por ejemplo:

  • Redux
  • Relay

 

Aplicación de ejemplo: Crea un HOC y envolver un componente con el.

En esta clase vamos a crear nuestro primer HOC, y lo haremos creando la aplicación de la siguiente imagen.

Aplicación ejemplo de la utilización de HOCs

Donde:

  • Ser√° capaz de calcular el impuesto a un pago o precio dado.
  • Nuestro HOC recibir√° una configuraci√≥n de entrada.
  • Internamente har√° los c√°lculos y se las pasaremos al componente de salida mediante su propiedades.

No olvides en ver el vídeo para comprender mejor este post y para ver el paso a paso de la implementación de Higher Order Component.

 

¬ŅC√≥mo crear un HOC?

Bien, te mencione que este tipo de componente es una función, así que para declararlo lo haremos de la siguiente manera.

const withImpuestos = (Component) =>{
        return class extends React.Component{
             render(){
                      return(
                            <Component />
                      )
             }
        }
}

En esencia:

  • Se declara como una funci√≥n tipo flecha.
  • En el nombre se recomienda utilizar la palabra "with" seguido de la palabra que m√°s represente la funci√≥n que tendr√° el HOC.
  • Dicha funci√≥n retorna una clase an√≥nima, la cual debe extender de React.Component.
  • Al regresar un componente de clase, este debe poseer un m√©todo render, tal y como hemos visto en otros tutoriales.
  • Nuestro m√©todo render regresar√° el Component que ha recibido como par√°metro.

Y listo con todo esto ya has creado tu primer HOC.

 

Creando nuestro HOC completo

const withImpuestos = (Component) =>{
  return (config)=> class extends React.Component{
    state={
      sucursal: config.sucursal,
      pago: "$" + config.pago,
      impuesto: 
        "$" + (config.pago * config.impuesto) 
        + " al " + (config.impuesto*100) + "%",
      ganancia: "$" + (config.pago - (config.pago * config.impuesto))
    }

    calcularImpuesto = (pago)=>{
      this.setState({
        pago: "$" + pago,
        impuesto: 
          "$" + (pago * config.impuesto) 
          + " al " + (config.impuesto*100) + "%",
        ganancia: "$" + (pago - (pago * config.impuesto))
      })
    }

    render(){
      return(
        <Component
          sucursal={this.state.sucursal}
          pago={this.state.pago}
          impuesto={this.state.impuesto}
          ganancia={this.state.ganancia}
          calcularImpuesto={this.calcularImpuesto} />
      )
    }
  }
}

El código anterior:

  • En primer lugar modificamos el return, ahora regresa una funci√≥n an√≥nima, que a su vez, regresara un componente de clase.
  • Por otra parte, en nuestro componente de clase tenemos que declarar un state para poder actualizar las propiedades que enviaremos en el componente que vamos a regresar.
state={
      sucursal: config.sucursal,
      pago: "$" + config.pago,
      impuesto: 
        "$" + (config.pago * config.impuesto) 
        + " al " + (config.impuesto*100) + "%",
      ganancia: "$" + (config.pago - (config.pago * config.impuesto))
    }

 

  • Tambi√©n declaramos el m√©todo calcularImpuesto, el cual recibir√° las actualizaciones desde el componente que vamos a envolver, para analizar el dato y actualizar el state.
    calcularImpuesto = (pago)=>{
      this.setState({
        pago: "$" + pago,
        impuesto: 
          "$" + (pago * config.impuesto) 
          + " al " + (config.impuesto*100) + "%",
        ganancia: "$" + (pago - (pago * config.impuesto))
      })
    }

 

  • Y finalmente en el m√©todo render regresamos el componente que envolvemos y le agregamos las propiedades que deseamos.
render(){
      return(
        <Component
          sucursal={this.state.sucursal}
          pago={this.state.pago}
          impuesto={this.state.impuesto}
          ganancia={this.state.ganancia}
          calcularImpuesto={this.calcularImpuesto} />
      )
    }

Excelente, hasta este punto ya tienes tu HOC completo y posee la l√≥gica que deseas reutilizar cada vez que envuelvas a otro componente, ahora toca dise√Īar el componente que deseamos envolver.

 

Creando el componente a envolver por el HOC

En el siguiente componente dise√Īaremos la interfaz que vimos en la imagen de este ejemplo.

function App(props) {
  const {sucursal, pago, impuesto, ganancia, calcularImpuesto} = props;
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Impuestos sucursal {sucursal}</h1>
        <input type="number" onChange={(e)=>{
            calcularImpuesto(e.target.value)
          }
        } />
        <p>{"Pago: " + pago}</p>
        <p>{"Impuesto: " + impuesto}</p>
        <p>{"Ganancia: " + ganancia}</p>
        <a
          className="App-link"
          href="https://ewebik.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Tutorial React JS EWebik
        </a>
      </header>
    </div>
  );
}

 

  • Donde por destructuraci√≥n obtenemos las propiedades que agrega el HOC.
const {sucursal, pago, impuesto, ganancia, calcularImpuesto} = props;

 

  • Como vez en las propiedades viene el m√©todo calcularImpuesto, el cual se lo pasamos al onChange del input para recuperar lo que escriba el usuario.
<input type="number" onChange={(e)=>{
         calcularImpuesto(e.target.value)
     }
 } />

 

  • Y finalmente rendereamos las propiedades mediante una etiqueta "p".
<p>{"Pago: " + pago}</p>
<p>{"Impuesto: " + impuesto}</p>
<p>{"Ganancia: " + ganancia}</p>

 

Y listo ya tienes tu aplicación funcionando, cada vez que introduzcas un dato en el input, se calculara el impuesto y veras tu HOC en acción. Recuerda que toda la explicación viene en el vídeo paso a paso y puedes clonar el repositorio para analizar el código.

Espero te haya sido √ļtil y hayas comprendido el por qu√© y para qu√© utilizar Higher Order Component en React, nos vemos en el siguiente post.

 

ūüßź Autoevaluaci√≥n: Higher Order Component

¬ŅQu√© son los Higher Order Components HOC en React?

¬ŅPara qu√© sirven los HOC?

Son ejemplos de HOC:

Juan Carlos

Juan Carlos García

Desarrollador de software / SEO

Durante a√Īos he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera p√°gina de Google, y hoy quiero compartir contigo lo que se en tecnolog√≠as como: Node JS, PHP, C# y Bases de datos.

Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.

© 2023 EWebik