Parece que la declaración if en mi gancho useEffect está evaluando, aunque la condición es falsa. ¿Por qué está pasando esto?
Mi código:
useEffect(() => { console.log(localStorage.getItem("darkMode")) if (localStorage.getItem("darkMode")) { console.log(localStorage.getItem("darkMode")) } }, [])La consola: la consola muestra falso dos veces
Mi código se compila sin advertencias ni errores, y mi función useEffect está en el nivel superior del componente de mi aplicación.
El problema es que localStorage.getItem siempre devuelve una cadena (o null si no hay ningún valor). Por eso, siempre ejecutará el código dentro del bloque if a menos que la cadena esté vacía.
Puede analizar la cadena con JSON.parse o simplemente verificar la igualdad con "true" .
useEffect(() => { console.log(localStorage.getItem("darkMode")) if (localStorage.getItem("darkMode") === "true") { console.log(localStorage.getItem("darkMode")) } }, [])o
useEffect(() => { const mode = JSON.parse(localStorage.getItem("darkMode")); console.log(mode); if (mode) { console.log(mode) } }, [])