here I had a problem, first I made a theme change using Tailwind CSS + daisyUI it seemed there was no problem until I found out that when changing the theme and refreshing the browser it flashed for a moment
And I looked at the console log and it turned out it was in this code
const [theme, setTheme] = useState("light");
if I change it to light then the dark theme flashes and vice versa but when I
useState("")
nothing it becomes <empty string>
I believe that the flickering I am experiencing is the problem from this, how can I fix it, any help is welcome
"use client";
import { createContext, useState, useEffect } from "react";
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }: any) => {
const [theme, setTheme] = useState("");
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
const storedTheme = localStorage.getItem("theme") || "light";
setTheme(storedTheme);
const intervalId = setInterval(() => {
setIsMounted(true);
}, 1000);
}, []);
if (!isMounted) {
console.log(theme);
return (
<div data-theme={theme} className="fixed top-0 left-0 w-full h-full z-50">
<div className="text-blue-500 opacity-75 top-1/2 mx-auto block relative w-0 h-0">
<span className="loading loading-dots loading-lg -ml-5"></span>
</div>
</div>
);
}
const changeTheme = (theme: string) => {
setTheme(theme);
localStorage.setItem("theme", theme);
};
return (
<ThemeContext.Provider value={{ theme, changeTheme }}>
{children}
</ThemeContext.Provider>
);
};
const [theme, setTheme] = useState("");
results from console log :
const [theme, setTheme] = useState("light");
results from console log :
According to your comment given, the error happens because
localStorage
is a browser specific feature not available in Node.js environment. You need to ensure that localStorage is accessed only after the component has been mounted, which means it's in the client-side environment. I have modified the answer,