Funciones y Componentes de Orden Superior en JavaScript y 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:007:17

Funciones y Componentes de Orden Superior en JavaScript y React

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

Clase 12 de 19

Clase 12 / 19

Comentarios (42)42 comentarios

Juan Pablo Jimenez

Hace 5 años

12.-Qué son los High Order Components

-- Las funciones como las conocemos pueden devolvernos un valor en sus returns, pero estas funciones de "orden 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.

Obed Paz

Hace 5 años

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 ‘recordar’ 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.

Fernando Quinteros Gutierrez

Hace 5 años

👩‍🔬 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 "capas" 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

Mariano Gastón Paduani

Hace 4 años

Muchas gracias!!!!

Fernando Quinteros Gutierrez

Hace 5 años

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

Currying

Mariano Gastón Paduani

Hace 4 años

Muchas gracias!!!

Christian Boffill

Hace 5 años

Creo que he pasado casi todos los cursos de JavaScript y no he escuchado, si mal no recuerdo, 'currin' 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 "closures", 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 "closures" 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 "closure" 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.

Juan Castro

Profesor

Hace 5 años

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

Luis Alejandro Vera Hernandez

Hace 5 años

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 😌

Filiberto Santillán

Hace 5 años

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.

Juan Castro

Profesor

Hace 5 años

:ok_hand;

Julian Franco

Hace 4 años

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.

Jair Neri

Hace 5 años

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

Josmanuel Sandrea

Hace 4 años

Desde mi punto de vista no tiene nada que ver, puesto que en el ejemplo que da Juan, lo que haces son crear funciones, que retornan componentes con "X" funcionalidad añadida, todo depende de como crees éstas funciones.

Espero que se haya entendido :)

Fabián Nava Pereda

Hace 4 años

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

Carlos Rodríguez

Hace 4 años

Corrrecto, las funciones de orden superior nos sirve para crear decoradores en la programación funcional.

Andersson Rincon

Hace 4 años

Viendo la documentacion, react indica que los HOC ya no son usados e incluso indican que la documentacion que existe en la actualidad ya no se actualizara. Me surgue la duda, cual seria el remplazo de esa funcion, o si de plano ya no hay algo parecido, e incluso si es relevante aprender esto ahora? Ya que no veo que hagan mencion de esto en la nueva documentacion.

Josue Tapia Linarez

Hace 3 años

Según mi conocimiento, desde que se introdujeron los Hooks en la versión 16.8.0, se ha reducido el uso de HOCs. Ninguno es mejor que el otro, pero los Hooks permiten reutilizar la lógica de estado y los efectos secundarios entre componentes sin tener que introducir una jerarquía adicional de componentes, lo que puede simplificar la estructura del código. Los Hooks pueden considerarse una mejora en la forma de compartir la lógica entre componentes en React.

Gerardo Castillo

Hace 4 años

En el minuto 5:50 creo que el código de ejemplo tiene un typo👇👇👇

Christian Rivera

Hace 4 años

Eso mismo

Harold Zurita Simon

Hace 3 años

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.

Nicolás Felipe Pinto Vega

Hace 2 años

Muchas gracias por tus notas. Me ayudó mucho a complementar la clase y entender mejor el concepto.

Yael Diez

Hace 5 años

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í.

Josué Hernández

Hace 4 años

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) => <h2>Hola, {props.nombre}!</h2>;

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: 'Juan' }.

Abdias Jimenez

Hace 5 años

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.

Franklin Lucero

Hace 4 años

jajajaja, me encanto el "y si lo hacemos bien!" (min: 5.40)

Reinaldo Mendoza

Hace 5 años

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

Williams Munguía

Hace 2 años

mmm esto me huele a closures de JS

Daniel Alberto Vega Bejarano

Hace un año

Los HOC son importantes para colocar otras funciones dentro y poder estructurar de mejor forma nuestros componentes

Recursos

Comprender cómo una función puede devolver otra función es la base para dominar uno de los patrones más poderosos en React. Los high order components (HOC) permiten inyectar propiedades, datos de APIs y lógica reutilizable a cualquier componente, sin modificar su estructura interna. Todo parte de un concepto fundamental de programación funcional: el currying.

¿Qué es el currying y por qué importa en React?

Antes de hablar de componentes, hay que entender las high order functions [0:06]. Son funciones que, en lugar de devolver un valor común, retornan otra función. Esa función de retorno se comporta como cualquier función normal de JavaScript: recibe parámetros y devuelve resultados.

Un ejemplo clásico es el de la suma [0:36]:

La high order function recibe el primer número.
La función de retorno recibe el segundo número.
Solo al llamar a ambas funciones obtenemos el resultado.

Lo interesante es que podemos guardar en una variable el llamado a la primera función y reutilizarla varias veces con distintos segundos parámetros [1:06]. Esto es currying: dividir una función con múltiples parámetros en una cadena de funciones que reciben un parámetro a la vez.

Si es la primera vez que te encuentras con este concepto, es normal que resulte confuso. El currying se estudia dentro de la programación funcional [1:24], y dominarlo antes de trabajar con frameworks o librerías de JavaScript marca una diferencia enorme.

¿Cómo se convierten las high order functions en high order components?

El salto conceptual es directo: los componentes de React también son funciones [1:48]. Entonces, una función que devuelve un componente de React es un high order component.

¿Qué papel juega el wrapped component?

La clave está en que nuestra función HOC recibe como parámetro un componente, conocido como wrapped component [2:06]. El componente de retorno puede:

Pasarle nuevas propiedades al wrapped component.
Renderizarlo junto con otros componentes.
Mostrarlo o no según alguna condición.

Por ejemplo, si un componente llamado TodoBox necesita una propiedad especial, en lugar de enviársela manualmente desde el componente padre, envolvemos TodoBox dentro del HOC [2:30]. Automáticamente recibe esa propiedad solo por haber pasado por el high order component.

¿Cómo funciona un HOC con llamadas a una API?

Un caso muy práctico es crear un HOC llamado withAPI [3:18]. Esta función:

Recibe un wrapped component.
Realiza una petición a una API antes de retornarlo.
Entrega toda la información obtenida como propiedades al componente.
Mientras carga, puede mostrar un estado de carga: un párrafo, un loading skeleton o lo que necesites.

Cualquier componente que necesite datos de esa API solo debe pasar por withAPI y los recibe automáticamente [3:42].

¿Se pueden encadenar múltiples high order components?

Sí, y aquí es donde el patrón se vuelve realmente potente [3:54]. Podemos envolver funciones dentro de funciones sin límite. Algunos ejemplos prácticos:

Permitir que cada componente defina la URL de la API desde donde cargar sus datos [4:06].
Crear HOCs para inyectar propiedades del usuario, datos filtrados de búsqueda o información persistida en local storage [4:30].
Pasar un componente por withTodos, luego por withUser, y obtener la información de ambos HOCs combinada [4:48].

La implementación sigue siendo sencilla: maquetas tu componente, lo envuelves en el HOC, le pasas los parámetros necesarios y recibes todas las propiedades inyectadas de forma automática.

El encadenamiento puede extenderse tanto como lo necesites: withTodos, luego withFilters, luego withUser [5:06]. Cada HOC agrega su propia capa de datos o lógica sin que el componente original se modifique.

¿Ya habías trabajado con high order components o es la primera vez que te encuentras con este patrón? Comparte tu experiencia y las dudas que te hayan surgido.

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} />
		);
	}
}

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} />
			);
		}
	}
}

// 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

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

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} />
		);
	}
}

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} />
			);
		}
	}
}

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

const SaludoConLog = withLog(Saludo);

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

Resumen

¿Qué es el currying y por qué importa en React?

Un ejemplo clásico es el de la suma [0:36]:

La high order function recibe el primer número.
La función de retorno recibe el segundo número.
Solo al llamar a ambas funciones obtenemos el resultado.

¿Cómo se convierten las high order functions en high order components?

El salto conceptual es directo: los componentes de React también son funciones [1:48]. Entonces, una función que devuelve un componente de React es un high order component.

¿Qué papel juega el wrapped component?

La clave está en que nuestra función HOC recibe como parámetro un componente, conocido como wrapped component [2:06]. El componente de retorno puede:

Pasarle nuevas propiedades al wrapped component.
Renderizarlo junto con otros componentes.
Mostrarlo o no según alguna condición.

¿Cómo funciona un HOC con llamadas a una API?

Un caso muy práctico es crear un HOC llamado withAPI [3:18]. Esta función:

Recibe un wrapped component.
Realiza una petición a una API antes de retornarlo.
Entrega toda la información obtenida como propiedades al componente.
Mientras carga, puede mostrar un estado de carga: un párrafo, un loading skeleton o lo que necesites.

Cualquier componente que necesite datos de esa API solo debe pasar por withAPI y los recibe automáticamente [3:42].

¿Se pueden encadenar múltiples high order components?

Sí, y aquí es donde el patrón se vuelve realmente potente [3:54]. Podemos envolver funciones dentro de funciones sin límite. Algunos ejemplos prácticos:

Permitir que cada componente defina la URL de la API desde donde cargar sus datos [4:06].
Crear HOCs para inyectar propiedades del usuario, datos filtrados de búsqueda o información persistida en local storage [4:30].
Pasar un componente por withTodos, luego por withUser, y obtener la información de ambos HOCs combinada [4:48].

La implementación sigue siendo sencilla: maquetas tu componente, lo envuelves en el HOC, le pasas los parámetros necesarios y recibes todas las propiedades inyectadas de forma automática.

¿Ya habías trabajado con high order components o es la primera vez que te encuentras con este patrón? Comparte tu experiencia y las dudas que te hayan surgido.

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

Funciones y Componentes de Orden Superior en JavaScript y React

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos