¡Hola, hola! En el vídeo de hoy vamos a crear un Custom Hook de React para poder persistir el estado de nuestro componente usando Local Storage,
de forma que podremos guardar la información de la caja de texto aunque actualicemos la página.
Si no sabes qué son los React Hooks, puedes encontrar en mi canal algunos vídeos de introducción.
Si ya lo tienes claro, pues quédate, que te interesa.
Pues vamos a empezar. Lo primero que hacemos es importar el Hook UseState.
Este UseState nos dará un estado local en nuestro componente de React y, al ejecutarlo, nos devuelve un array de dos posiciones.
La primera posición tiene el valor del estado, la segunda posición un método para actualizar el estado.
Y a UseState le pasamos el valor inicial que tendrá este estado de nuestro componente.
Esto, el texto, será para la caja, así que vamos a hacer que el TextArea tenga una PropValue que tendrá este estado Text.
Y cada vez que cambiemos el valor de la caja de texto, lo que vamos a hacer es a recoger este evento,
vamos a acceder a la propiedad Target, a la propiedad Value de Target, y así vamos a recuperar qué ha escrito el usuario en la caja de texto.
Con esto actualizamos el estado y ya tendremos un estado local con el valor de la caja de texto.
Bueno, ya ves que cuando hemos actualizado la página, pues se ha perdido el estado local.
Me imagino que te sientes un poco timado o timada, pero no te preocupes porque teníamos que empezar por algún sitio,
teníamos que añadir un estado local a nuestro componente.
Así que vamos a ir ahora a añadir el LocalStorage.
Vamos a crear un método llamado SetLocalStorage, que recibirá como parámetro el valor que queremos guardar.
Vamos a hacer que esta función se ejecute dentro de un TryCatch para evitar problemas,
y lo primero que hacemos es actualizar el estado local de nuestro componente con el valor que tendrá el texto.
Luego vamos a acceder a la propiedad LocalStorage de Window y vamos a hacer un SetItem,
para guardar en el LocalStorage en la key Text este nuevo valor, de forma que lo podamos utilizar más adelante.
Luego en el Catch, como nos gustaría saber si ha habido algún tipo de error,
por ejemplo, que no se ha podido guardar en el LocalStorage esto, lo que vamos a hacer básicamente es un ConsoleError para estar informados.
Ahora solo nos queda utilizar este nuevo método SetLocalStorage, de forma que ahora en lugar de hacerle un Change de actualizar el estado local,
lo que vamos a hacer es ejecutar este nuevo método.
Muy bien, pues esto ya lo tenemos preparado.
Actualizaremos el estado local, actualizaremos el LocalStorage con el key Text con este nuevo valor,
y vamos a ver si esto funciona.
Escribimos, refresco, todavía no funciona.
Vale, no te preocupes, es que todavía nos queda por cambiar una cosita,
y es que el UseState todavía está utilizando el estado inicial con un string vacío.
Ahora vamos a utilizar el LocalStorage.
Vamos a leer de Window el LocalStorage y cogemos el Item que tenemos en la key Text.
Ahora sí, como ves, ya se ha actualizado, ya tenemos ahí nuestro texto,
ahora podemos escribir tranquilamente, vamos a actualizar la página y ya lo tenemos.
Fácil, ¿verdad? Muy rápidamente hemos sabido persistir nuestro estado local del componente
utilizando LocalStorage.
Esto está muy bien, pero como ves, todavía falta la mitad del vídeo,
y eso es porque vamos a hacer que esta funcionalidad de persistir el estado de nuestro componente
lo podamos reutilizar en otros, creando un Custom Hook.
Así que quédate, que hay más.
Vamos a crear un archivo llamado UseLocalStorage,
porque los Custom Hooks tienen que empezar con el nombre Use.
Importamos el HookUseState de React.
Vamos a crear la función UseLocalStorage y la exportamos ya, directamente.
UseLocalStorage va a tener dos parámetros.
Primero, la key, y segundo parámetro, el valor inicial que deberá tener.
¿Por qué?
Porque puede ser que no tengamos en el LocalStorage todavía nada guardado,
así que el InitialValue no servirá para tener este valor inicial por si todavía no lo hemos utilizado.
En este Custom Hook lo primero que necesitamos es tener un estado local.
Vamos a crearlo.
Tendremos en el estado local que queremos guardar y luego una forma de actualizarlo.
Utilizamos el UseState y por ahora dejamos que esté vacío, que no tenga valor inicial.
Ya lo veremos más adelante.
Ahora, ¿qué debería devolver este Custom Hook?
Pues vamos a hacer que devuelva un array de dos posiciones.
En la primera, el valor que tenemos guardado.
De esta forma es el valor que podremos leer del LocalStorage.
Y como segundo parámetro, este array tendrá una forma de actualizar el LocalStorage.
Esto es lo que queremos devolver.
Y como ya lo tenemos claro, vamos a implementar este SetValue.
Este SetValue va a ser muy parecido al que habíamos hecho anteriormente.
Va a recibir un parámetro que va a ser el valor que queremos guardar.
Como nos basamos en el otro, nos lo vamos a copiar y lo vamos a pegar aquí.
Y vamos a ver las diferencias que va a tener.
Lo primero, ya no actualizamos el SetText porque hemos dicho que tiene que ser agnóstico.
Tenemos que utilizar el SetStoreValue para guardar en el estado local de este Hook.
Ahora, no vamos a guardar más en la KeyText porque queremos poder guardar en cualquier Key.
Y utilizaremos la Key que le hemos pasado como parámetro.
Y del Value, ojo, tenemos que hacer algo.
Ya que como valor podemos pasar cualquier cosa, pero en el LocalStorage solo se pueden guardar del tipo String.
Así que vamos a transformar el valor con un JSON.stringify para asegurarnos que el valor que le pasamos siempre lo podamos guardar.
Muy bien, ya tenemos solucionado cómo vamos a actualizar el LocalStorage desde fuera.
Pero ahora tenemos que arreglar cómo leemos el LocalStorage desde dentro.
Para ello, tenemos que actualizar el UseState.
En el parámetro que tenía el valor inicial, se le puede pasar una función.
Y esta función devuelve el valor que tendrá el estado inicial.
Vamos a envolver la función en un TryCatch.
Lo primero que intentamos es recuperar del LocalStorage el elemento que tenemos en la Key que le hemos pasado como parámetro.
Vale, esto que lo tenemos en la constante Item, lo que vamos a hacer es devolver.
En el caso que tengamos Item, vamos a intentar parsear el contenido.
¿Por qué?
Porque si hemos guardado un String antes, aunque hubiéramos pasado un objeto, nos gustaría volver a recuperar ese objeto.
En el caso de que no tengamos ningún Item, lo que vamos a hacer es básicamente devolver el valor inicial que nos ha pasado como parámetro.
Ahora, vamos a hacer un Catch para que, en el caso que haya un error, vamos a devolver simplemente el InitialValue que le habíamos pasado como parámetro.
Vale, voy a arreglar este tipo que he dejado aquí de InitialValue.
Creo que ya está bien, ya está listo para que lo podamos utilizar en el otro componente.
Para utilizarlo, simplemente lo único que tenemos que hacer primero es importar este Custom Hook.
Tenemos que hacer un import nombrado con UseLocalStorage y utilizamos la ruta relativa.
Ahora, este UseLocalStorage es el que vamos a utilizar en lugar de todo lo que teníamos antes.
Lo borramos y utilizamos UseLocalStorage y le decimos que queremos utilizar la llave Text y el valor inicial es un String vacío.
Ahora, en el OnChange, en lugar de ejecutar el SetLocalStorage, utilizamos el SetText porque ya va a hacer la funcionalidad que estábamos haciendo antes.
Ahora, vamos a probarlo, a ver si esto funciona.
Ponemos un mensajito y simplemente vamos a refrescar para ver si se guarda.
Efectivamente, esto funciona perfectamente.
Hemos creado un Custom Hook para poder guardar y persistir un estado local en un componente.
Y como os podéis imaginar, podéis utilizarlo en el mismo componente tantas veces como queráis.
Podríamos guardar cuantas veces se ha hecho clic o se haya tuiteado este mensaje, mostrarlo en el mismo componente y actualizarlo cada vez que le damos al botón de tuitear.
Pero también podríais utilizarlo fuera de este componente, podríais compartir el estado para leer desde el mismo sitio.
Es muy potente en muy pocas líneas de código y esto gracias a la potencia de los hooks en React.
Y ya sabes, si te ha gustado dale like, suscríbete para más vídeos de Frontend, compártelo con tus amigos y si tienes cualquier duda, si lo vas a utilizar, si te gustaría saber algo, si tienes cualquier idea, déjalo en los comentarios y nos vemos en el próximo.