High Order Function (HOF)

Son funciones que retornan otras funciones aplicando el concepto funcional currying

<aside> 💡 Currying es una técnica en programación funcional que transforma una función que toma varios argumentos en una serie de funciones que toman un solo argumento.

</aside>

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

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

// 3

High Order Components

Debido a que los componentes son funciones podemos aplicar las HOF.

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

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

<aside> 📎 Podemos personalizar el componente con parámetros de funciones para configurar las props y reutilizarlo en otros componentes.

</aside>

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

Ejemplo de uso

Los High Order Components permiten la personalización de componentes mediante parámetros de funciones para configurar las props, hacer una solicitud y entregar información al componente antes de su retorno, personalizar el estado de carga y agregar más personalizaciones con "capas" adicionales.

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 TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	);
}

const TodoBoxWithApi = withApi(TodoBox);