Scribd
Cargar
15 vistas11 páginas

1.4 Construyendo Tus Hooks

El documento explica cómo aprovechar y crear Hooks personalizados en React para extraer y reutilizar lógicas entre componentes. Se detalla el proceso de creación de un Hook, que consiste en definir una función con un closure que contenga la lógica deseada y exporte los valores necesarios. Finalmente, se menciona que utilizar un Hook implica simplemente llamarlo y extraer sus propiedades de retorno.

Cargado por

Aarón García Sánchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
15 vistas11 páginas

1.4 Construyendo Tus Hooks

El documento explica cómo aprovechar y crear Hooks personalizados en React para extraer y reutilizar lógicas entre componentes. Se detalla el proceso de creación de un Hook, que consiste en definir una función con un closure que contenga la lógica deseada y exporte los valores necesarios. Finalmente, se menciona que utilizar un Hook implica simplemente llamarlo y extraer sus propiedades de retorno.

Cargado por

Aarón García Sánchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

CONSTRUYENDO TUS HOOKS

ÍNDICE

● Aprovechando los Hooks

● Extrayendo un nuevo Hook

● Usando un nuevo Hook


APROVECHANDO LOS HOOKS
● Una de las motivaciones ya vistas de Hooks era crear lógicas compactas y
reutilizables y evitar que el ciclo de vida se condense en un único punto

● Aquellas lógicas compartidas entre varios componentes pueden ser extraídas y


convertidas en un Hook propio

● Esto nos permite tener una colección de Hooks para nuestra aplicación que nos
permita compartir lógicas concretas de nuestra aplicación

● Todos los Hooks, incluyendo personalizados, deben empezar con la palabra “use”,
esto es una convención y una limitación del propio React
APROVECHANDO LOS HOOKS
EXTRAYENDO UN NUEVO HOOK
● La funcionalidad del ejemplo anterior es útil para un componente, pero podría
ser útil para cualquier componente de nuestra aplicación

● Duplicar esta funcionalidad con componentes de clase implicaría replicarla


manualmente en el ciclo de vida de cada uno de ellos

● La capacidad para crear todas las funciones manejadoras de ciclo de vida que
queramos nos permite extraer la funcionalidad atómicamente para dar
disponibilidad a cualquier otro componente
EXTRAYENDO UN NUEVO HOOK
EXTRAYENDO UN NUEVO HOOK
● Aprovechamos el uso de closures de funciones para crear un entorno privado
para nuestro Hook, usando un arrow para acceder al contexto de React

● El ciclo de vida referenciado en el interior del closure se unirá al resto de


manejadores de ciclo de vida referenciados en el componente donde lo
importemos

● En el return de nuestros Hooks podremos devolver cualquier número de


propiedades de estado o incluso setters y funciones que sean útiles para su
funcionalidad
USANDO UN NUEVO HOOK

Inyectarlo sólo consiste en llamarlo como una función cualquiera y extraer sus
propiedades de retorno para su uso
USANDO UN NUEVO HOOK
USANDO UN NUEVO HOOK
PARA RESUMIR
Un Hook personalizado nos permite extraer lógicas
enganchadas al ciclo de vida que puedan ser reutilizables entre
varios componentes
Crear un Hook no es más que crear una función cuyo closure
posea la lógica deseada con los hooks necesarios y que exporte
los valores que tengan que ser leídos/usados por el resto de
componentes

Usar un Hook sólo implica llamarlo y extraer de su retorno


todas las variables que deseemos utilizar en nuestro
componente

También podría gustarte