Introducción a los HOC con huskies
Bitacora de mi cubículo (localización mi silla)
NOTA: Arreglar el brazo izquierdo de mi localización, esta no es forma de trabajar.
Diario de mi primer HOC
Día 1
Me encanta la aproximación funcional de React, nunca me gustó la sintaxis de clases y ahora la puedo eliminar con mis components puros, limpios, funcionales y fáciles de testear.
Día 2
Bueno, ya he desarrollado 4 componentes maravillosos, únicos, limpios, carentes de estado, funcionales, si, me encanta la palabra funcional, el código funcional, todo es maravilloso.
(4 horas mas tarde)
¿Cómo coj**** hago que este componente se renderice cuando se actualiza esta prop?
*consultando documentación de React…*
Vale, no entres en pánico que parece fácil, usa el ciclo de vida. ¡Pan comido!
Dónde coj**** meto el ciclo de vida en mi maravilloso componente puro????!!
Don’t panic! ¡Documentación!
(Extracto interpretado por mí de la documentación de componentes puros de React “¿Te creías el p*** Erik Elliott con tu aproximación funcional y molona de los componentes? Pues no puedes usar el ciclo de vida, que te den, apáñatelas…” )
(Si no sabes quien es Erik Elliott y estas escribiendo javascript ya estas tardando en hacer click en el link)
Aquí es cuando básicamente tienes una conversación contigo mismo en la que intentas decidir si, 1 — volver a los componentes con sintaxis de clases, o 2 — dedicarte a la horticultura en una granja, que es mucho más tranquilo.
Pero tu eliges la 3 — vuelves a Google y buscas algo como “cómo usar componentes puros sin cortarte las venas” y entre artículos y tutoriales, lees algo sobre Higher-Order Components, y como ya estas metido en el fregado hasta la barbilla dices “¡Qué coñ*! Vamos a procastinar y leer sobre los HOC, quiero usar HOC, no sé ni para qué valen, pero suena molón (Recordemos que si algo suena molón y eres developer, entonces quieres usarlo).
Seguimos leyendo, y nos encontramos con definiciones como:
“A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.”
Ayuda en presente
Si a ti esta definicion no te ayudó tampoco, es normal. Me costó un minuto tomar fuerzas para seguir leyendo, ya sabía que esto no iba a ser un paseo…
“[…] a higher-order component is a function that takes a component and returns a new component.”
Ya podrían haber empezado por ahí, me hubieran ahorrado respirar dentro de una bolsita, hasta aquí llegamos todos, función que devuelve una función:
Sigamos leyendo, que me he venido arriba:
“We can write a function that creates components[…] The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let’s call the function”
withLifeCycle:
Básicamente la idea es algo como esto, al menos en mi cerebro:
Es decir, una función que coge mi componente puro y lo encapsula dentro de un componente con acceso a todo el ciclo de vida y sus funciones y estados.
El HOC por dentro es algo como esto:
Hasta aquí todo genial, porque yo sigo teniendo mi código limpito y parece que el componente que sale de esa función en la leche, peeeeeero ¿Dónde meto yo las movidas que quería hacer dentro de las funciones del ciclo de vida?
(Mini ataque de pánico… Pero estábamos muy fuertes, así que sigo leyendo.)
“Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.”
Está muy bien saberlo y ¡Eh! Punto positivo para los HOC, pero no me ayuda ahora mismo. ¡No, en serio! ¿Cómo meto mi código ahi dentro?
*Sigo leyendo…*
“And that’s it! The wrapped component receives all the props of the container, along with a new prop, data, which it uses to render its output. The HOC isn’t concerned with how or why the data is used, and the wrapped component isn’t concerned with where the data came from.”
Genial, esto nos explica que nuestros argumentos extra otherArguments podemos usarlos dentro de nuestro HOC y hacer lo que queramos con ellos, nuestro poder llega lejos... ¡Muy lejos!
Y como somos muy listos, sabemos que estos argumentos extra podrían ser incluso funciones, y podríamos ejecutarlas en cualquier punto del ciclo de vida (guiño, guiño, codo, codo).
Aplicando lo asimilado entre risas histéricas y lagrimitas de cocodrilo
Lo suyo es ir terminando ésto e inmolarme profesionalmente publicando un árticulo técnico con palabras inadecuadas, que uno es humano y ya va siendo hora de comer, así que un breve resumen.
Suponiendo el siguiente código:
Podemos hacer con nuestro HOC algo como esto:
Pero la diversión y utilidad de esta maravilla no se queda aquí porque también tenemos acceso al estado y el poder de controlar los render y los cambios de propiedades, vamos un pasote super poderoso.
