Práctica de High-Order Components en React

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:02

Práctica de High-Order Components en React

Curso de React.js: Patrones de Render y Composición

Clase 13 de 19

Clase 13 / 19

Recursos

¿Cómo crear y utilizar High-Order Components?

Los High-Order Components (HOC) son una herramienta poderosa en React que permiten ampliar la funcionalidad de los componentes de manera eficiente. Estos componentes de orden superior encapsulan lógica y comportamiento adicionales y pueden aplicarse a otros componentes para modificar o extender sus capacidades, incrementando así la modularidad y reutilización del código.

¿Cómo iniciamos con un HOC?

Primero, debemos crear un nuevo componente que recibirá un componente original, envolverá o añadirá funcionalidad y retornará un nuevo componente ampliado. En este caso, es recomendable seguir el estándar de nombrar la función con el prefijo with, como withSaludo en el ejemplo, para especificar claramente la naturaleza del HOC.

function withSaludo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <React.Fragment>
        <h2>Buenas</h2>
        <WrappedComponent {...props} />
      </React.Fragment>
    );
  };
}

¿Cómo se aplica un HOC a un componente?

Una vez creado el HOC, se aplica al componente original al momento de importarlo en otro archivo. Este nuevo componente enriquece al original con la funcionalidad añadida por el HOC:

const AppWithSaludo = withSaludo(App);

¿Cómo pasamos propiedades a un HOC?

Un HOC no solo puede cambiar el aspecto o la funcionalidad, sino que también es capaz de inyectar propiedades. Es necesario asegurarse de pasar todas las propiedades recibidas al componente envuelto para mantener la reactividad:

function withSaludo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <React.Fragment>
        <h2>{props.saludo || 'Hola'}</h2>
        <WrappedComponent {...props} />
      </React.Fragment>
    );
  };
}

// Uso
const AppWithSaludo = withSaludo(App);

¿Cómo se manejan estados complejos y datos externos dentro de un HOC?

Los HOC se prestan a trabajar con estados complejos, llamadas a APIs y lógica condicional. Por ejemplo, puedes incorporar un estado que administre si una llamada a una API está cargando o ha fallado, mostrar un componente de 'loading' o gestionar errores de manera global:

function withApiData(WrappedComponent) {
  return function EnhancedComponent(props) {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);

    React.useEffect(() => {
      fetchSomeData()
        .then(response => {
          setData(response.data);
          setLoading(false);
        })
        .catch(err => {
          setError(err.message);
          setLoading(false);
        });
    }, []);

    if (loading) return <div>Cargando...</div>;
    if (error) return <div>Error: {error}</div>;

    return <WrappedComponent data={data} {...props} />;
  };
}

¿Por qué utilizar HOC en React?

Los HOC son esenciales para:

Compartir lógica entre varios componentes sin repetir código.
Aumentar la modularidad y mantenimiento.
Implementar patrones de diseño como inyección de dependencias.
Crear componentes más reutilizables y versátiles.

Los High-Order Components son una de las herramientas fundamentales que cualquier desarrollador de React debería aprender a manipular, para crear aplicaciones más eficientes y escalables. Experimenta combinándolos con distintos tipos de lógica para descubrir su potencial completo y continúa ampliando tus conocimientos para crear aplicaciones más dinámicas e interactivas.

Jairo Campos Ruiz

Hace 5 años

Si alguien quiere hacer esto con TypeScript esta es la mejor forma que se me ocurre lo he hecho con genéricos para que se adapte a cualquier componente

Primero creamos el componente App que este no tiene ningún misterio solo pasarle el tipado como cualquier componente en TypeScript

type App2Props = {
  name?: string;
  greeting?: string;
}

function App2(props: App2Props) {
  return (
    <h2>{props.greeting}, {props.name}!</h2>
    );
}

Este sería el primer componente que creamos solo con un wrapper:

function withWhatever<T>(Component: ComponentType<T>) {
  return function ComponenteDeVerdad(hocProps: T) {
    return (
      <>
        	<Component {...hocProps}/>
        	<p>Estamos acompañando al wrapped component</p>
      	     </>
    );
  }
}

const AppWithWhatever = withWhatever(App2)

Y este con dos wrapper:

function withSaludo<T>(Component: ComponentType<T>) {
  return function WrappedComponentWithGreeting(greeting: string) {
    return function ComponenteDeVerdad(hocProps: T) {
      return (
        <>
         		<Component {...hocProps} greeting={greeting}/>
         		<p>Estamos acompañando al wrapped component</p>
                 </>
      );
    }
  }
}

const AppWithSaludo = withSaludo(App2)("Hola")

En el render es exactamente igual que en JavaScript:

ReactDOM.render(
  <React.StrictMode>
    	<AppWithWhatever name="Jairo" greeting="Hola"/>
    	<AppWithSaludo name="Jairo" />
    </React.StrictMode>,
  document.getElementById('root')
);

Jairo Campos Ruiz

Hace 5 años

Una cosa que no dije es que componentType el cual uso para crear el tipado genérico se importa de React:

import React, { ComponentType } from 'react';

Christian Rivera

Hace 4 años

Le agregaría un null-safe porque vos sabes que siempre lo vas a llamar con ese argumento y el optional en los parametros es solo para "engañar" a typescript (hay otras formas de hacerlo pero me parecieron peores como las vistas acá). Si haces con el null-safe quedaría:

function App2(props: App2Props) {
  return (
    <h2>{props!.greeting}, {props!.name}!</h2>
    );
}

Comentarios (54)54 comentarios

Jaime Joaquín Gonzalez Bosch

Steve Anthony Luzquiños Agama

Eduardo Gonzalez Zavala

Tomás Antonio Cartaya Lyon

Rubén Ernesto Aragón Gil

Edixon javier Pabon Lizcano

Ivan González

Maia aizner

Hace 2 años

Luis Alejandro Nieto Ruth

Ricardo Rito Anguiano

Juan Carlos Aguilar

Paolo Joaquin Pinto Perez

Vladimir Farrera Vera

Hace 3 años

Daniel Morales

Fabian Perdomo

Marco Antonio Miranda Sandoval

Diego Camino Reinoso

Mario Arango

Gualberto Montiel

Josmanuel Sandrea

Luis Fernando Méndez González

Juan Castro

Profesor

Armando Cruz Vidal

Donovan RM

Jair Neri

Reinaldo Mendoza

Luis Lazcano

Miguel Figueroa

Hace 2 meses

Santiago Perozo

Hace 8 meses•editado

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Práctica de High-Order Components en React

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos