Render props vs. High Order Components vs. React Hooks

💚 Like si quieres un Curso de Patrones de Render Avanzados en React.js

17.-Render props vs. High Order Components vs. React Hooks

–
Maquetación

Render props o render functions vs React hooks

• Ambas son formas correctas de trabajar y comunes.
• Las render props suben el nivel de elegancia del código pero también pueden bajar el nivel de código aburrido comparado con los react hooks.
• Si practicamos mucho podremos usar las render props de manera mucho más saludable para los componentes más estructuralmente importantes de nuestras apps. Nos ayudan a proteger nuestros componentes para que no nos equivoquemos y la maquetación sea correcta.

–
Share data, compartir información entre componentes.

Aquí participan todos los patrones.

–
Render Functions:

• Compartir info con funciones que en sus parámetros nos dejan esa info que necesitamos que nos compartieran.
• Si necesitamos demasiada info de distintas render functions para un mismo componente deja de verse bien y podría llegar al código spaghetti.

–
HOC:

• Funciones que pueden retornar y retornar y retornar otras funciones hasta que en algún momento retornemos un componente de react y podamos pasarle toda la info.
• Usarlos es sencillo, envolvemos nuestros componentes en estos HOC y automáticamente van a recibir toda la info que nos querían compartir estos HOC.
• Si necesitamos la info de muchos HOC’S en un mismo componente tenemos el mismo problema que con las render functions. Código muy horizontal.

–
React hooks

• Llamamos al react hook (oficial o custom) y luego consumimos la info en el return del componente.
• Cuando tenemos muchos llamados a distintos react hooks no hay código horizontal.
• Ganaron los hooks para compartir info entre varios componentes. 🎉

Do React Hooks Replace Higher Order Components (HOCs)?

–
https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58

–
En este articulo toca el tema de los hooks vs los HOC, estableciendo en que casos de uso es mejor usar cada uno. Me ayudó a concretar más este tema de cuál sería mejor usar en algunas cosas, pero como siempre, con la práctica me irá quedando más claro.

🛠 los hooks me parece la mejor opcion a la hora de compartir props o estados, pero los Hocs son importante a la hora de intergrarle una funcionalidad extra a un componente comom una api.

🆚 Render props vs. High Order Components vs. React Hooks

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

En mi caso,

1. Si quiero heredar props entre varios componentes descendientes que perteneces a la misma ruta, uso composición de funciones, si es una prop que se utilizara en otras rutas y mi aplicacion usa redux, pues entonces uso redux para las actualizaciones automaticas.
2. Si quiero elegir donde y que renderizar, elijo render props o render functions con su Children y cloneElement.
3. Si quiero heredar solo lógica uso cumtom hooks y si quiero lógica y algo de estilos o etiquetas, uso hoc.

Me encanto la forma de esta clase y con el “mucha suerte a todos”, me hiciste reir un rato XD

Una ventaja de los High Order Components es que : facilitan la inyección de props a nuestros componentes.

Custom Hooks 😃

f(g(x) es una composición, también se pude encontrar como fog “f bolita g” y leer como f compuesta de de g.

Los Hooks son la mejor opción por legibilidad del codigo. Sin embargo, puede generar problemas en el render si no tenemos cuidad.

Jajajja… Flashback de Vietnam. Jaja.

Hooks 💚

hooks foreveeeeeeeeeeeeeeerrrrr

De acuerdo con Juan, Hooks Forever!! pero, usar HOC es muy interesante, pero exige cierto grado de experiencia, así que en esta etapa, probarlos y fortalecer los conocimientos de programación funcional

Hasta ahora me siento mas comodo con los React Hook 😃. Espero igual con mucha practica dominar los Render props y HOC