No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Qu茅 son los High Order Components

12/19
Recursos

Aportes 38

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

12.-Qu茅 son los High Order Components


Las funciones como las conocemos pueden devolvernos un valor en sus returns, pero estas funciones de 鈥渙rden superior鈥, son funciones que devuelven otras funciones.


Si llamamos a la high order function y le enviamos un par谩metro no tendremos todav铆a un resultado, como est谩 devolviendo otra funci贸n tenemos que llamar a esa funci贸n que obtenemos luego de llamar a la de orden superior, enviarle los nuevos par谩metros que necesita la funci贸n de retorno y entonces si, obtendremos nuestro resultado.

Ok, veo en varios comentarios que hay confusion entre las HOF y los closures.
.

Para empezar tratando de resolver la duda, no son lo mismo.
Son conceptos diferentes.
Pueden llegar a trabajar juntos muchas veces pero como mencion茅, son conceptos individuales.

.
Antes hay que entender que es una first class function.
Los lenguajes con funciones de primera clase (first class functions) tratan a las funciones como si fueran variables. Es por eso que en JS nosotros podemos guardar funciones en variables, etc. Usarlas como cualquier otro valor.

.
Ahora, las funciones de orden superior (high order functions) son simplemente funciones que retornan una funci贸n, que toman una funci贸n como argumento, o ambas. Es decir que aprovechan las ventajas de las first class functions (que se pueden pasar como parametro y demas).
.

Y los closures son como en JS las funciones pueden 鈥榬ecordar鈥 o alcanzar las variables que fueron declaradas en el ambito en el que la misma function fue retornada.
Es decir pueden preservar su 谩mbito externo dentro de su 谩mbito interno.
Con ambito, me refiero al scope, o contexto.

.

Ejm: Veamos la sig. funcion:

const myCounterFunc = () => {
  let counter = 0
  return () => ++counter
}

const incrementCounter = myCounterFunc();
incrementCounter() // 1
incrementCounter() // 2
incrementCounter() // 3

.

  • myCounterFunc es una high order function porque esta retornando otra funcion, la que aumenta la variable counter, y al mismo tiempo es una fisrt class function porque la puedo guardar en una variable, en este caso en incrementCounter.
  • Finalmente en incrementCounter estamos usando los closures. En esta funcion se guarda el ambito de la funcion de retorno, es decir que es capaz de recordar a la variable counter y su ultimo valor.

馃懇鈥嶐煍 Qu茅 son los High Order Components

Apuntes

  • Son funciones que retornan otras funciones aplicando el concepto funcional currying
function highOrderFunction(var1) {
	return function returnFunction(var2) {
		return var1 + var2;
	}
}

const withSum1 = highOrderFunction(1);
const sumTotal = withSum1(2);

// 3

Debido a que los componentes son funciones podemos tambi茅n aplicar este concepto

// Caso base

function Componente(props){
	return <p>...</p>
}

function highOrderComponent() {
	return function Componente(props) {
		return <p>...</p>
	}
}
function highOrderComponent(WrappedComponent) {
	return function Componente(props) {
		return (
			<WrappedComponent
				{...algoEspecial}
				{...props}
			/>
		);
	}
}
  • De esta manera estamos personalizando varios aspectos del componente deseado, como:
    • Los par谩metros de las funciones nos permiten configurar el componente que envuelve, las props
    • Podemos reutilizar los HOC

Ejemplos

function withApi(WrappedComponent) {
	const apiData = fetchApi('https://api.com');
	
	return function WrappedComponentWithApi(props) {
		if (apidData.loading) return <p>Loading</p>;
		return(
			<WrapperdComponent data={apiData.json} />
		);
	}
}
  • Antes de retornar el componente en s铆, hace una petici贸n y entrega al componente esa informaci贸n
  • Adem谩s que podemos personalizar el estado de carga
function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	);
}

const TodoBoxWithApi = withApi(TodoBox);
  • Tambi茅n podemos agregar m谩s 鈥渃apas鈥 para tener m谩s personalizaciones como por ejemplo
function withApi(apiUrl){
	return function withApiUrl(WrappedComponent) {
		const apiData = fetchApi(apiUrl);
		
		return function WrappedComponentWithApi(props) {
			if (apidData.loading) return <p>Loading</p>;
			return(
				<WrapperdComponent data={apiData.json} />
			);
		}
	}
}
function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	);
}

const TodoBoxWithApi = withApi('https://api.com')(TodoBox);
  • Esto nos permite poder extender bastante su uso aplic谩ndolo como

En caso de querer saber m谩s acerca del concepto de currying comparto esta p谩gina de JavaScript info en espa帽ol donde me pareci贸 que el concepto esta bastante bien explicado

Creo que he pasado casi todos los cursos de JavaScript y no he escuchado, si mal no recuerdo, 鈥榗urrin鈥 functions por ning煤n lado, por favor si alguien me dice en que curso esta para ir a verlo se lo agradezco 馃槂.
Lo m谩s cercano a eso son los 鈥渃losures鈥, funciones que devuelven otras funciones y que recuerdan el valor de las variables declaradas en el 谩mbito l茅xico de la funci贸n de primer orden. Los 鈥渃losures鈥 tienen muchas aplicaciones gracias a este efecto.


Luego me puse a buscar y encontr茅 el concepto de: funci贸n de orden superior (HOF) y es aquella que recibe una funci贸n como par谩metro y retornan otra funci贸n. Evidentemente que con esta estructura es capaz de hacer lo mismo que un 鈥渃losure鈥 porque en esencia lo es.
Los componentes en React se benefician de esto al parecer por ser funciones.
Si a un componente le pasamos como par谩metro otro componente( equivale a funci贸n que recibe otra funci贸n) y luego regresamos otro componente, que mediante sus propias props y las variables (con efecto closure) sea capaz de modificar el componente que se recibi贸 antes, entonces entregamos un resultado diferente para cada componente que se le pase al HOC.


-Con esto podemos pasarle propiedades a nuestro componente (como el ejemplo de la API de la clase) algo como lo que hace el context y los hooks. (proveer props a los componentes de react).
-Tambi茅n podemos agregarle elementos al componente o convertirlo en hijo de otro componente.

Ni sabia que hab铆a un curso de Js funcional, no estaba en mi ruta. No conf铆es en mi Juan David馃槴 he llegado aqui sin topar ese curso, prometo ir para all谩 cuando termine este curso 馃槍

Espero que la siguiente imagen pueda explicar la relaci贸n entre los componentes en como se mueven de un lugar a otro, al igual que sus props.

Cada que Juan dice, si no has visto ese curso...y no lo tengo hecho siento que traicion贸 su confianza y me obliga a ir a hacerlo. Pdta No sab铆a que exist铆a un curso de JS Funcional en las rutas no se encuentra, supongo que por lo que es antiguo.

Veo la clase y me saltan alertas mentales de un 鈥渃allback hell鈥 pero con HOC 鈥 abusar de ellos parece que genera codigo en diagonal y complica la lectura del mismo.

este soy yo pensando en las clases de programacion!

Es como si fuera un decorator extendiendo la funcionalidad de la primera instancia 馃

En el minuto 5:50 creo que el c贸digo de ejemplo tiene un typo馃憞馃憞馃憞

Que genio!
Muy buen concepto para cuando tenemos que pasar data a un componente ya creado.
Tambi茅n se puede modificar el padre del componente para enviarle la data. Pero esto afectar铆a la composici贸n y reusabilidad de los componentes en s铆.

Un Higher-Order Component (HOC) es una funci贸n que toma un componente de React y devuelve otro componente modificado. Es decir, un HOC es una funci贸n que envuelve a un componente para proporcionarle ciertas funcionalidades adicionales.

Los HOC permiten reutilizar la funcionalidad com煤n en varios componentes sin tener que replicar el mismo c贸digo en cada uno de ellos. Adem谩s, los HOC permiten separar la l贸gica del componente de su representaci贸n visual, lo que puede facilitar la reutilizaci贸n de la l贸gica en diferentes contextos.

Los HOC se utilizan con frecuencia en React para agregar ciertas funcionalidades comunes a los componentes, como la gesti贸n del estado, la autenticaci贸n, el enrutamiento, el manejo de errores, entre otras. Algunos ejemplos comunes de HOC son connect en la biblioteca de gesti贸n de estado Redux, withRouter en la biblioteca de enrutamiento React Router y withStyles en la biblioteca de estilos Material-UI.

Un ejemplo simple de un HOC podr铆a ser el siguiente:

function withLog(Component) {
  return function(props) {
    console.log(`Renderizando el componente ${Component.name} con las props`, props);
    return <Component {...props} />;
  }
}

En este ejemplo, withLog es un HOC que toma un componente de React y devuelve otro componente que envuelve al original. El componente resultante es id茅ntico al original, pero con la adici贸n de un mensaje de registro en la consola cada vez que se renderiza.

Podemos utilizar este HOC para envolver cualquier componente, por ejemplo:

const Saludo = (props) => <h1>Hola, {props.nombre}!</h1>;

const SaludoConLog = withLog(Saludo);

function App() {
  return (
    <div>
      <SaludoConLog nombre="Juan" />
    </div>
  );
}

En este ejemplo, SaludoConLog es el resultado de envolver el componente Saludo con el HOC withLog. Cada vez que se renderiza SaludoConLog, se mostrar谩 un mensaje en la consola que indica que se est谩 renderizando el componente Saludo con las props { nombre: 鈥楯uan鈥 }.

Un componente de orden superior (HOC por las siglas en ingl茅s de higher-order component) es una t茅cnica avanzada en React para el reuso de la l贸gica de componentes. Los HOCs no son parte de la API de React. Son un patr贸n que surge de la naturaleza composicional de React.


En concreto, un componente de orden superior es una funci贸n que recibe un componente y devuelve un nuevo componente.


Mientras que un componente transforma props en interfaz de usuario, un componente de orden superior transforma un componente en otro.


Esto lo extraje de la documentaci贸n oficial de react.js, si no les queda muy claro alg煤n concepto les recomiendo leerla es verdaderamente 煤til.

jajajaja, me encanto el 鈥測 si lo hacemos bien!鈥 (min: 5.40)

Currying me suena a cocina, nunca habia escuchado el termino en programaci贸n

De momento no encontre cursos de js en platzi que hablen de Currying y otras cosas, buena oportunidad para mas cursos de js.

PD: llevo 30% de la antigua escuela web de platzi y ahora es la nueva ruta de front y backen, si no hiciera otras rutas llevaria el 50%

Curso de Programaci贸n Funcional en JavaScript por Bedu - Platzi

https://platzi.com/cursos/funcional-js/

me da error 500

驴Qu茅 es un closure? Un closure es un concepto en programaci贸n que se refiere a una funci贸n que "recuerda" el 谩mbito l茅xico en el que fue creada, incluso despu茅s de que la funci贸n haya terminado de ejecutarse. Esto significa que un closure puede acceder y hacer referencia a las variables y par谩metros de la funci贸n externa en la que se declar贸, incluso cuando esa funci贸n ya no est谩 en el 谩mbito de ejecuci贸n. Un closure se crea cuando una funci贸n anidada (una funci贸n definida dentro de otra funci贸n) hace referencia a variables de la funci贸n externa. Estas variables capturadas por el closure se mantienen vivas en la memoria mientras el closure exista y pueda acceder a ellas. Esto permite crear funciones que retienen y manipulan datos que se mantienen privados y seguros dentro de su 谩mbito. Los closures son 煤tiles en una variedad de situaciones, como la encapsulaci贸n de datos y comportamientos, la creaci贸n de funciones de f谩brica, la gesti贸n de devoluciones de llamada y la implementaci贸n de estructuras de datos como contadores y generadores. Aqu铆 tienes un ejemplo simple de un closure en JavaScript: javascriptCopy code function crearFuncionContadora() { let contador = 0; function incrementar() { contador++; console.log(contador); } return incrementar; } const contador1 = crearFuncionContadora(); const contador2 = crearFuncionContadora(); contador1(); // Imprime 1 contador1(); // Imprime 2 contador2(); // Imprime 1 (cada contador tiene su propio estado) En este ejemplo, `crearFuncionContadora` crea una funci贸n anidada `incrementar`, que "recuerda" la variable `contador` incluso despu茅s de que `crearFuncionContadora` haya terminado de ejecutarse. Esto permite tener m煤ltiples contadores independientes. # HOC vs Closure * Los High Order Components (HOCs) son una t茅cnica espec铆fica de React que se utiliza para componer y extender componentes React existentes al agregar funcionalidad adicional o propiedades. Los HOCs son espec铆ficos de React y permiten extender componentes de manera eficiente. * Los closures son un concepto general en programaci贸n que se utiliza para encapsular variables y funciones en un 谩mbito, lo que les permite retener su estado incluso despu茅s de que la funci贸n que los cre贸 haya finalizado. Los closures son una caracter铆stica de muchos lenguajes de programaci贸n y no est谩n limitados a React.

Si quieren repasar el concepto de currying m谩s detenidamente, les recomiendo este video鈥 (g)old

Las 鈥淗igh Order Functions鈥 son funciones que pueden tomar otras funciones como argumentos y/o devolver otras funciones como resultados. Esto puede sonar un poco complicado, pero en realidad es bastante sencillo. Una forma de entenderlo es pensar en una funci贸n que hace una pizza. Una pizza es una comida deliciosa que tiene muchos ingredientes diferentes, como la salsa, el queso y los vegetales. Una 鈥淗igh Order Function鈥 ser铆a como un chef que puede tomar diferentes ingredientes y combinarlos para hacer una pizza deliciosa. De la misma manera, una 鈥淗igh Order Function鈥 en programaci贸n puede tomar otras funciones y combinarlas para hacer cosas interesantes.

Mucha programaci贸n funcional en React. Me gusta!

function highOrderFunction(var1) {
  return function returnFunction(var2) {
    return var1 + var2;
  }
}

const withSum1 = highOrderFunction(1);
const sumTotal = withSum1(2);

//---------------------------------------------------------

function highOrderComponent(WrappedComponent) {
  return function Componente(props) {
    return (
      <WrappedComponent
        {...algoEspecial}
        {...props}
      />;
    );
  }
}

//--------------------------------------------------------

function withApi(WrappedComponent) {
  const apiData = fetchApi('https://api.com')

  return function WrappedComponentWithApi(props) {
    if(apiData.loading) return <p>Loading</p>;

    return (
      <WrappedComponent data={apiData.json} />
    )
  }
}

隆Ey t煤! Si te sientes m谩s perdid@ que nada en esta clase es porque m铆nimo te saltaste 3 cursos de JavaScript antes de este y lo sabes, pecad@r 馃槄.
.

馃捇Los temas que m铆nimo necesitas para entender esta clase, creo yo, son:
.
1. Scope.
2. This.
3. High Order Functions.
4. Closures.
5. Currying.

.
Y en cada tema hay otros m谩s profundos detr谩s que est谩n en la Escuela de JavaScript y la Escuela de Desarrollo Web.

El uso que le veo mas cercano es cuando se tienen componentes repetitivos, por ejemplo, si quieres hacer un motor de blog. Tienes muchos elementos como titulos, subidas de imagenes, videos, parrafos, links, y quieres que transforme el post del usuario en elementos del navegador. La idea no es que el usuario escriba h1, p, canva, picture etc, sino que con un par de clicks e input del teclado pueda agregarlo. Pueden ir en una carpeta a parte y que se llamen cuando se necesite. Tambien lo veo si el usuario quiere modificar el header o el layout de su blog.

Esto tambien aplica en las closures (que se ense帽an en els cursos de JS)

Considera el siguiente ejemplo:

function creaFunc() {
  var nombre = "Mozilla";
  function muestraNombre() {
    alert(nombre);
  }
  return muestraNombre;
}

var miFunc = creaFunc();
miFunc(); 

Si se ejecuta este c贸digo tendr谩 exactamente el mismo efecto que el ejemplo anterior: se mostrar谩 el texto 鈥淢ozilla鈥 en un cuadro de alerta de Javascript. Lo que lo hace diferente (e interesante) es que la funci贸n externa nos ha devuelto la funci贸n interna muestraNombre() antes de ejecutarla.

Puede parecer poco intuitivo que este c贸digo funcione. Normalmente, las variables locales dentro de una funci贸n s贸lo existen mientras dura la ejecuci贸n de dicha funci贸n. Una vez que creaFunc() haya terminado de ejecutarse, es razonable suponer que no se pueda ya acceder a la variable nombre. Dado que el c贸digo funciona como se esperaba, esto obviamente no es el caso.

La soluci贸n a este rompecabezas es que miFunc se ha convertido en un closure. Un closure es un tipo especial de objeto que combina dos cosas: una funci贸n, y el entorno en que se cre贸 esa funci贸n. El entorno est谩 formado por las variables locales que estaban dentro del alcance en el momento que se cre贸 el closure. En este caso, miFunc es un closure que incorpora tanto la funci贸n muestraNombre como el string 鈥淢ozilla鈥 que exist铆an cuando se cre贸 el closure.

Este es un ejemplo un poco m谩s interesante parecido al que muestra el profe : una funci贸n creaSumador:

function creaSumador(x) {
  return function(y) {
    return x + y;
  };
}

var suma5 = creaSumador(5);
var suma10 = creaSumador(10);

console.log(suma5(2));  // muestra 7
console.log(suma10(2)); // muestra 12 

En este ejemplo, hemos definido una funci贸n creaSumador(x) que toma un argumento 煤nico x y devuelve una nueva funci贸n. Esa nueva funci贸n toma un 煤nico argumento y, devolviendo la suma de x + y.

En esencia, creaSumador es una f谩brica de funci贸n: crea funciones que pueden sumar un valor espec铆fico a su argumento. En el ejemplo anterior utilizamos nuestra f谩brica de funci贸n para crear dos nuevas funciones: una que agrega 5 a su argumento y otra que agrega 10.

suma5 y suma10 son ambos closures. Comparten la misma definici贸n de cuerpo de funci贸n, pero almacenan diferentes entornos. En el entorno suma5, x es 5. En lo que respecta a suma10, x es 10.

uff i鈥檓 very exciting with this course

Este concepto de verdad me gusto mucho, hay que aprenderlo a manejar pero yo creo q debe haber un consenso y una documentaci贸n por que puede llegar hacer inmanejable pasando esos par谩metros

Gracias kotlin por presentarme la programaci贸n funcional de ante mano 馃槃

Los H.O.C me hacen acordar inevitablemente a los decorators de python 馃え

Qu茅 son los High Order Components

.
Para hablar de los HOC primero debemos hablar de Currying y los High Order Functions.
.
Las funciones pueden devolvernos un valor en su return, pero estas HOF devuelven otras funciones.
.

function highOrderFunction() {
	return function returnFunction() {
		return /* ... */
	}
}

.
La funci贸n highOrderFunction retorna otra funci贸n returnFunction y esta a su vez puede comportarse como una funci贸n com煤n y corriente retornando lo que sea.
.

function highOrderFunction(var1) {
	return function returnFunction(var2) {
		return var1 + var2;
	}
}

const withSum1 = highOrderFunction(1);
const sumTotal = withSum1(2);

.
En este ejemplo, la highOrderFunction y el returnFunction pueden recibir par谩metros como cualquier otra funci贸n de javascript. Pero si nos damos cuenta al llamara a la HOF y le enviamos un argumento todav铆a no obtendr铆amos alg煤n resultado puesto que nos devuelve otra funci贸n. Entonces si llamamos a la nueva funci贸n (obtenida de llamara a la HOF) con el nuevo argumento que necesita en este caso withSum1, veremos que vamos a obtener nuestro resultado.
.
El ejemplo consiste en sumar 2 n煤mero, pero no vamos a enviar ambos argumentos a la HOF, sino que lo llamamos con el primer argumento, y el segundo lo llamamos en la funci贸n de retorno.
.
Esto es interesante, porque nos permite guardar en una variable el llamado a la HOF y luego poder llamar a esta variable las veces necesarias para completar la suma llamando a la funci贸n de retorno con cualquier otro argumento.
.

function highOrderFunction(var1) {
	return function returnFunction(var2) {
		return var1 + var2;
	}
}

const withSum1 = highOrderFunction(1);
const sumTotal = withSum1(2);

.

Currying

.
El currying es una t茅cnica en programaci贸n funcional que implica convertir una funci贸n que toma m煤ltiples argumentos en una secuencia de funciones que toman un solo argumento.
.
En JavaScript, esto se puede lograr de varias maneras.
.

// Funci贸n original que toma varios argumentos
function suma(a, b, c) {
  return a + b + c;
}

// Funci贸n curry para la suma
function currySuma(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

// Uso de la funci贸n curry
const resultado = currySuma(1)(2)(3);
console.log(resultado); // Salida: 6

.
En este ejemplo, la funci贸n currySuma toma el primer argumento a y devuelve una funci贸n que toma el siguiente argumento b, que a su vez devuelve una funci贸n que toma el 煤ltimo argumento c. Esto permite llamar a la funci贸n resultante en una cadena, proporcionando un argumento a la vez.
.
El currying puede ser 煤til en ciertos casos, como en la creaci贸n de funciones parcialmente aplicadas o en la composici贸n de funciones en un estilo m谩s modular.
.

HOF vs Currying

.
Las funciones de orden superior (high-order functions) y el currying son conceptos relacionados en el 谩mbito de la programaci贸n funcional, pero no son lo mismo.
.
Funciones de Orden Superior (High-Order Functions):
.

  • Las funciones de orden superior son aquellas que toman una o m谩s funciones como argumentos y/o devuelven una funci贸n como resultado.
  • Permiten tratar a las funciones como ciudadanos de primera clase, lo que significa que pueden ser pasadas como argumentos a otras funciones, retornadas como valores de otras funciones y asignadas a variables.

.

function operacionMatematica(operacion, a, b) {
  return operacion(a, b);
}

function suma(x, y) {
  return x + y;
}

function resta(x, y) {
  return x - y;
}

const resultado1 = operacionMatematica(suma, 5, 3);
const resultado2 = operacionMatematica(resta, 8, 2);

console.log(resultado1); // Salida: 8
console.log(resultado2); // Salida: 6

.
Currying:
.

  • El currying es una t茅cnica espec铆fica que implica convertir una funci贸n que toma m煤ltiples argumentos en una secuencia de funciones que toman un solo argumento.
  • Permite la aplicaci贸n parcial de funciones, lo que significa que puedes proporcionar algunos argumentos y obtener una nueva funci贸n que espera los argumentos restantes.

.

function currySuma(a) {
  return function(b) {
    return a + b;
  };
}

const suma5 = currySuma(5);
const resultado = suma5(3); // Salida: 8

console.log(resultado);

.
En resumen, las funciones de orden superior son un concepto m谩s amplio que incluye cualquier funci贸n que manipule otras funciones, mientras que el currying es una t茅cnica espec铆fica dentro de las funciones de orden superior que se centra en la transformaci贸n de funciones que toman m煤ltiples argumentos. Ambos conceptos pueden combinarse y utilizarse en conjunto en el contexto de la programaci贸n funcional.
.

High Order Components

.
Mismo conceptos que HOF, pero puesto que los componentes tambi茅n son funciones entonces podemos hacer combinaciones y experimentos muy interesantes.
.

function Componente(props) {
	return <p>...</p>;
}

function highOrderComponent() {
	return function Componente(props) {
		return <p>...</p>;
	}
}

.
En este caso retorna una funci贸n que es un componente de React.
.

function highOrderComponent(WrappedComponent) {
	return function Componente(props) {
		return (
			<WrappedComponent
				{...algoEspecial}
				{...props} 
			/>
		);
	}
}

.
Aqu铆 podemos ver que el HOC recibe como par谩metro otro componente llamado WrappedComponent por lo que nuestro componente de retorno va a poder utilizar a este WrappedComponent y darle nuevas propiedades, renderizarlo con otros componentes, mostrarlo o no dependiendo de alguna condici贸n.
.
Por ejemplo, la HOF recibe un WrappedComponent y utiliza el componente de retorno para pasarle propiedades especiales algoEspecial aparte de su props.
.

function TodoBox(props) {
	return (
		<div prop={props.algoEspecial}>
			{props.children}
		</div>
	)
}

const TodoBoxWithSpecialProps = highOrderComponent(TodoBox);

.
Entonces podemos crear cualquier componente y si necesita una propiedad llamada algoEspecial, esta propiedad no se la vamos a tener que enviar desde el componente que esta llamando a nuestro componente que necesita esa propiedad, en este caso TodoBox.
.
Ahora vamos por envolver a TodoBox quien necesita esa propiedad especial, envolverlo o encapsularlo dentro de nuestra HOC y autom谩ticamente va a recibir esa propiedad especial.
.
Normalmente, tendr铆amos un componente que llame a nuestro componentes que en este caso es TodoBox y si este necesita una cierta propiedad especial, tendr铆amos que envi谩rsela desde el componente que est谩 llamando a TodoBos por ejemplo ser铆a el componente App.
.

App
|=> HOC
	|=> TodoBox
	|=> TodoBox

.
Pero si envolvemos nuestro componente TodoBox dentro de la funci贸n HOF o HOC, entonces ya no es necesario enviarle esa propiedad, sino que va a recibirla autom谩ticamente solo por haber pasado por nuestro HOC.
.

function withApi(WrappedComponent) {
	const apiData = fetchApi("https://api.com");
	
	return function WrappedComponentWithApi(props) {
		if(apiData.loading) return <p>Loading</p>;
		return (
			<WrappedComponent data={apiData.json} />
		);
	}
}

.
La funci贸n withApi sigue recibiendo un WrappedComponent pero antes de retornarlo hace una petici贸n a alguna API y entrega autom谩ticamente toda esa informaci贸n de esa API al WrappedComponent. Adem谩s mientras la API est茅 cargando vamos a poder mostrar un estado de carga por medio de un loading skeleton o un p谩rrafo al respecto.
.

function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	)
}

const TodoBoxWithApi = withApi(TodoBox);

.
Gracias a ello cualquier componente que necesite los datos de esa API solo va tener que pasar por el HOC withApi y va tener los datos autom谩ticamente.
.

function withApi(apiUrl) {
	return function withApiUrl(WrappedComponent) {
		const apiData = fetchApi(apiUrl);

		return function WrappedComponentWithApi(props) {
			if(apiData.loading) return <p>Loading</p>;
			return (
				<WrappedComponent data={apiData.json} />
			);
		}
	}
}

.
Podemos envolver funciones dentro de funciones, como por ejemplo permitir a cada componente que decida cual ser谩 la URL de la API d贸nde cargaremos sus datos.
.

function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	)
}

const TodoBoxWithApi = withApi("https://api.com")(TodoBox);

.
La implementaci贸n sigue siendo extremadamente sencilla puesto que maquetamos el componente, lo envolvemos en el HOC withApi, le enviamos la URL de la API al HOC, y luego le enviamos a nuestro componente.
.

const TodoBoxWithUser = 
	withUser(TodoBox);

const TodoBoxWithFilters = 
	withFilters(TodoBoxWithUser);

const TodoBoxWithTodos = 
	withTodos(TodosBoxWithFilters);

.
Podemos observar que se pueden hacer HOCs para darle propiedades del usuario a nuestros componentes, para darle datos filtrados de busqueda, para darle datos de TODOs persistidos en local storage, entre otros usos que queramos darle.
.
Incluso podemos usar HOCs para crear nuestros componentes, y estos envueltos en HOCs pasarselos a otros HOCs para que sigan envolviendo, inyectando propiedades y haciendo su magia.
.

withUser
|=> withTodos
	|=> Component

.
Por ejemplo si necesitamos que el componente tenga los datos de usuario y de datos de los TODOs, lo que vamos hacer es pasar primero el componente al HOC withUser y al resultado de esta lo pasamos al HOC de withTodos, obtenemos de esa manera la informaci贸n de los 2 HOCs.
.

withUser
|=> withFilters
	|=> withTodos
		|=> Component

.
Por supuesto no hay l铆mites y as铆 seguir todo lo que queramos.

A dios mio!!!

Video que explica de manera clara que es el currying
https://www.youtube.com/watch?v=3sglcKXKbyQ

Con este video se logra comprender un poco mejor:
.
https://www.youtube.com/watch?v=FuuqPqvWMv0

Entonces se podr铆a decir que son lo mismo que los closures? 馃