Recursos

Do React Hooks Replace Higher Order Components (HOCs)?

Apuntes

Maquetación: Render Props vs Custom Hooks

• React Hooks
  • Nos proveen información que va actualizándose
  • Las verificaciones de datos y componentes deben estar en un mismo lugar
• Render Props
  • Las validaciones pasan a ser parte del componente TodoList y solo enviamos los componentes respectivos

🔥 Render Props 🔥 Suben el nivel de elegancia y bajan el código aburrido a comparación de los custom hooks, pero se puede volver algo saludable para los componentes más estructurales de nuestras aplicaciones en caso de practicar bastante esta técnica.

Shared data

Que pasa si tenemos muchos lugares de donde se consume la información

• Render Functions

  • Comparten información con los parámetros que reciben, pero si necesitamos información de distintos lugares para un componente, se convierte código espaguetti

  <Componente1>
  	{props1 => (
  		<Componente2>
  			{props2 => (
  				<Componente3>
  					{props3 => (
  						{/* ... */}
  					)}
  				</Componente3>
  			)}
  		</Componente2>
  	)}
  </Componente1>
  

• HOC

  • Si necesitamos la misma información puede ser demasiado largo

  const TodoBoxWithEverything = withApi(
  	withSomething1(
  		withSomething2(
  			withSomething3(
  				withSomething4(
  					withSomething5(
  						TodoBox
  					)
  				)
  			)
  		)
  	)
  );
  

• Hooks

  • Es sencillo de leer

  const [whatever1, setWhatever1] = useState();
  const [whatever2, setWhatever2] = useState();
  const [whatever3, setWhatever3] = useState();
  const [whatever4, setWhatever4] = useState();
  const [whatever5, setWhatever5] = useState();
  
  return (
  	<Componente {...todosLosWhatevers} />
  );
  

🔥 Hooks 🔥

Pero en segundo lugar queda HOC debido a que se puede mejorar la legibilidad con la función compose

const TodoBoxWithEverything = compose(
withApi,
withSomething1,
withSomething2,
withSomething3,
withSomething4,
withSomething5,
)(TodoBox);