Ya hemos visto cómo podemos crear custom hooks para extraer la lógica de nuestra aplicación y evitar hacerla dentro de los componentes.
Pero también podemos crear custom hooks que nos van a facilitar la vida trabajando con componentes puramente visuales, como puede ser un formulario.
Y en esta clase vamos a ver cómo podemos crear un custom hook que se va a llamar UseField y nos va a ayudar a manejar los inputs de un formulario.
Vamos a verlo.
Podríamos tener un custom hook que sea UseField.
En lugar de tener toda esta información del input, todo esto que estamos haciendo del input, podríamos hacerlo de otra forma.
Por ejemplo, podríamos tener un custom hook llamado Field, que le podemos posar el tipo del Field.
Está bastante bien porque puedes tener algo así.
UseState.
Tendrías el método UnChange.
Lo que pasa es que en estos que no son controlados, que ya supongo que lo hicimos por tener el ejemplo de que no fuesen controlados, TargetValue.
Porque estos se repiten los formularios un montón.
Donde, de hecho, claro, hay un montón de librerías, bibliotecas, utilidades que te ayudan con esto.
¿Pero qué pasa con este custom hook?
Que es súper fácil de escribir.
Súper, súper fácil.
Y este custom hook lo que puedes hacer, por ejemplo, imaginemos que estos son controlados.
Controlados significa que tiene su propio estado.
Pues lo que podríamos hacer aquí es, por ejemplo, tener aquí esto que era el Username.
Pues le llamamos Username.
Hacemos un UseField, le decimos el tipo, en este caso el Type, el Type es Text.
Y ahora que tenemos este Username que devuelve el Type, el Value y el UnChange, pues con todo esto lo que puedes hacer es, ya ves tú, esto lo podemos quitar, el Value también.
El Input, el Type este, lo tengo.
Vale.
¿Cómo lo haríamos?
Type.
Pues esto sería Username.Type.
El Name, el Name por ahora no lo tengo, pero bueno, lo vamos a dejar ahí.
El Value, pues esto sería Username.Value.
El UnChange, Username.UnChange.
¿Qué pasa?
Que como además se llaman exactamente igual estos tres, ves, Type, Type, Value, Value, UnChange, UnChange.
Pues esto además lo que podrías hacer sería algo así, Username.
Y ya tendríamos toda la gestión del estado, tipo y el Value utilizando un custom hook.
Y además esto lo podríamos reutilizar tantas veces como queramos.
Por ejemplo, con el Password, pues lo único que tenemos que poner aquí es que esto es Password, esto es Password.
Y aquí, pues lo que hacemos es que esto es Password.
Y ya podemos quitar esto, esto y esto.
Y con esto tendríamos toda la gestión del estado, la tendríamos.
Que esto sería un custom hook que en un momento te podría permitir controlar un formulario, guardar fácilmente el estado, tener el UnChange,
que esto muchas veces la gente lo hace una y otra vez de forma manual, que es un poco rollo, y te funcionaría.
Vamos, lo mejor que tienen este tipo de cosas es que lo puedes utilizar, lo ves, lo copias, lo pegas.
De hecho, hay una web que creo que es UseHooks, que os recomiendo un montón, donde hay un montón de hooks que parecen una tontería,
pero te pueden quitar muchísimo código.
Por ejemplo, UseToggle, que al final lo que te hace es el típico estado que tienes de True o False, pues mira, este sería el hook y esto sería como lo utilizarías.
Pues para saber si ha cambiado o no ha cambiado el texto, pues UseToggle.
Y ya tendrías True o False, podría ser uno de los dos, y podrías hacer un Toggle.
Cuando haces clic, haría el Toggle automáticamente por ti.
Ya no te tendrías que preocupar de hacerlo tú.
Hay un montón de este estilo, de comparaciones, utilizar cosas asíncronas, UseRouter.
Hay algunos que son más complejos, EventListener, aunque al final hay algunos un poco...
Mira, para hacer un Dark Mode, hay un montón, hay un montón.
Para utilizar el valor anterior del estado y guardarlo, para saber si has hecho clic fuera.
Así que, mira, para utilizar el Windows Site.
Al final es que tienes un montón de ejemplos.
Al final, el tema es encontrar cómo puedes reutilizar esa lógica y no tener que volverla a escribir.
El tema del UseField, que es un hook que es súper sencillo, es súper potente.
Obviamente, si queréis cosas más potentes, pues tenéis...
Está muy bien.
De hecho, este me gusta bastante, que ya te hace...
Ya te proporciona hooks como este y mucho mejores para hacer validaciones y un montón de historias.
Y si no, tenéis Formic también, que también es bastante potente.
Un poquito más complejo.
A mí Formic me gusta menos.
Me gusta más React Hook Form.
Si os tengo que recomendar uno, yo recomendaría este, que es bastante chiquitito.
Y podéis hacer formularios de una forma súper sencilla, con muy pocas líneas de código.
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!
¡Gracias!