Hook propio: useLocalStorage

hooksmedia

20:00empieza al escribir

Guía

Modo del reto

# Progreso de los requisitos

sin ejecutardevuelve el valor y una función para cambiarlo
sin ejecutardevuelve el valor inicial cuando no hay nada guardado
sin ejecutardevuelve el valor guardado cuando lo hay
sin ejecutarguarda cada cambio bajo su clave como JSON
sin ejecutaracepta una función del valor anterior, como useState
sin ejecutarse actualiza cuando otra pestaña guarda la misma clave
sin ejecutarlee la clave nueva cuando la clave cambia, sin sobrescribirla

# Casos borde

Se muestran cuando ejecutas los tests. Hasta entonces aparecen como un requisito oculto.

ocultoRequisito oculto
ocultoRequisito oculto
ocultoRequisito oculto

# Enunciado

Objetivo

Crea el hook useLocalStorage(key, initialValue): funciona como useState, pero el valor se guarda en localStorage bajo key, así que sobrevive a una recarga de la página, y sigue los cambios que guardan otras pestañas. Practicas los hooks propios, los efectos con limpieza y JSON.

Lo que ya tienes

Un esqueleto del hook, como exportación con nombre, y una demo que guarda con él un nombre y un contador de visitas.
Tu trabajo es la lógica del hook.
Conserva el nombre useLocalStorage y la exportación: los tests usan el hook a través de un componente de test.
La vista previa corre en un sandbox, así que su localStorage vive en memoria y empieza vacío cada vez que el código se recarga. En una página real sobrevive a las recargas.

Requisitos

En el primer renderizado devuelve el valor guardado bajo key (como JSON) o, si no hay ninguno, initialValue.
Devuelve [value, setValue]; setValue acepta un valor nuevo o una función del anterior, como useState.
Cada cambio se guarda bajo key como JSON.
Cuando otra pestaña guarda la misma clave (el evento storage de window), el valor se actualiza.
Si el componente pasa otra key, el hook devuelve lo que hay guardado bajo la clave nueva (o initialValue), y lo guardado bajo cada clave se queda como estaba.

Ejemplo

useLocalStorage("color", "green") sin nada guardado → "green".
setValue("blue") → devuelve "blue", y localStorage.getItem("color") es "\"blue\"".
Recargas la página → vuelve a devolver "blue".

Pistas

Pista 1

useState acepta una función que calcula el valor inicial una sola vez: lee el almacenamiento ahí.

Pista 2

Guarda en un efecto que dependa de key y de value.

Pista 3

Escucha storage en un efecto, y quita el listener en su limpieza.

Conceptos

Hooks propios.
localStorage, JSON.stringify y JSON.parse.
Efectos con limpieza.

App.jsx

Vista previa

La consola está vacía

Ejecuta tu código con Ctrl+S

Esta consola empieza de cero cada vez que se carga la vista previa. La consola de DevTools del navegador conserva los mensajes con Preserve log.