Hi,
In the ThemeProvider.tsx, You are calling the handleChangeTheme() function inside the useEffect hook whenever there is change in the mode.
But in the handleChangeTheme method, we are setting the mode again by setMode(), this will change the mode and use effect will run again and this will goes in loop which will cause the issue of Maximum Update Depth Exceeded in the React.
const handleChangeTheme = () =>{
if(mode === "light") {
setMode("dark");
document.documentElement.classList.add("dark");
} else {
setMode("light");
document.documentElement.classList.add("light");
document.documentElement.classList.remove("dark");
}
}
useEffect(() => {
handleChangeTheme();
}, [mode]);