No tienes acceso a esta clase

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

Render props vs. High Order Components vs. React Hooks

17/19
Recursos

Aportes 16

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

馃挌 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鈥橲 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 鈥渕ucha 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 鈥渇 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