Question about navbar error #329
|
Hi, when I was finishing my US I found some strange error in navbar component, I think this line was made by @4l3x4nd3r4u1 |
Replies: 1 comment 1 reply
|
I reviewed the Navbar issue you mentioned. The red underline you're seeing could be due to the exhaustive-deps ESLint rule. Although the code works, the linter might warn because the useEffect depends on theme but internally calls setTheme with currentTheme, which could suggest a potential infinite loop (even though the if prevents it). I don't see the error in my editor (Neovim), so this is my best guess based on the snippet you shared. 
A possible fix is to set the dependency array to empty [], since this effect should only run once when the component mounts to sync the theme from localStorage. Here's the suggested snippet: useEffect(() => {
const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null;
if (savedTheme && savedTheme !== theme) {
setTheme(savedTheme);
}
setThemeReady(true);
}, []);Additional note: The package.json might be missing typescript as a direct dependency (only the ESLint plugin is present). This could also cause ghost errors in some editors. Adding it might resolve several type-related warnings. I'll test this change when I merge my HU into main. |
|
Okay! thanks for the explanation! |
I reviewed the Navbar issue you mentioned. The red underline you're seeing could be due to the exhaustive-deps ESLint rule. Although the code works, the linter might warn because the useEffect depends on theme but internally calls setTheme with currentTheme, which could suggest a potential infinite loop (even though the if prevents it). I don't see the error in my editor (Neovim), so this is my best guess based on the snippet you shared.
A possible fix is to set the dependency array to empty [], since this effect should only run once when the component mounts to sync the theme from localStorage. Here's the suggested snippet: