refactor: fix warning for bad setState call in theme logic

src/app.tsx

@@ -62,7 +62,14 @@ const BoardLayout = () => {
 };
 
 const GlobalLayout = () => {
-  useTheme();
+  const [theme] = useTheme();
+
+  useEffect(() => {
+    document.body.classList.add(theme);
+    return () => {
+      document.body.classList.remove(theme);
+    };
+  }, [theme]);
 
   return (
     <>
@@ -73,12 +80,6 @@ const GlobalLayout = () => {
 };
 
 const App = () => {
-  const initialTheme = useInitialTheme();
-
-  useEffect(() => {
-    document.body.classList.add(initialTheme);
-  }, [initialTheme]);
-
   return (
     <div className={styles.app}>
       <Routes>

src/hooks/use-initial-theme.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import useThemeStore from '../stores/use-theme-store';
 import useDefaultSubplebbits from './use-default-subplebbits';
@@ -17,20 +18,30 @@ const useInitialTheme = () => {
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
   const isInPendingPostView = isPendingPostView(location.pathname, params);
 
+  let initialTheme = 'yotsuba';
+
+  useEffect(() => {
+    let theme = 'yotsuba';
+
     if (isInPendingPostView) {
-    return currentTheme || 'yotsuba';
+      theme = currentTheme || 'yotsuba';
     } else if (isInAllView || isInSubscriptionsView) {
-    return getTheme('sfw') || 'yotsuba-b';
+      theme = getTheme('sfw') || 'yotsuba-b';
     } else if (isInHomeView || isInNotFoundView) {
-    return 'yotsuba';
+      theme = 'yotsuba';
     } else if (subplebbitAddress) {
       const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
       if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-      return getTheme('nsfw') || 'yotsuba';
+        theme = getTheme('nsfw') || 'yotsuba';
+      } else {
+        theme = getTheme('sfw') || 'yotsuba-b';
       }
-    return getTheme('sfw') || 'yotsuba-b';
     }
-  return 'yotsuba';
+
+    initialTheme = theme;
+  }, [isInPendingPostView, isInAllView, isInSubscriptionsView, isInHomeView, isInNotFoundView, subplebbitAddress, getTheme, currentTheme, subplebbits]);
+
+  return initialTheme;
 };
 
 export default useInitialTheme;

src/hooks/use-theme.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
 import useThemeStore from '../stores/use-theme-store';
@@ -24,21 +24,9 @@ const useTheme = (): [string, (theme: string) => void] => {
   const subplebbits = useDefaultSubplebbits();
 
   const initialTheme = useInitialTheme();
-  const [theme, setLocalTheme] = useState<string>(() => initialTheme);
+  const [userSetTheme, setUserSetTheme] = useState<string | null>(null);
-  const [themesLoaded, setThemesLoaded] = useState(false);
-
-  useEffect(() => {
-    const loadAndApplyThemes = async () => {
-      await loadThemes();
-      setThemesLoaded(true);
-    };
-
-    loadAndApplyThemes();
-  }, [loadThemes]);
-
-  useEffect(() => {
-    if (!themesLoaded) return;
 
+  const getCurrentTheme = useCallback(() => {
     const subplebbitAddress = params?.subplebbitAddress;
     const isInAllView = isAllView(location.pathname, params);
     const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -55,12 +43,21 @@ const useTheme = (): [string, (theme: string) => void] => {
       }
     }
 
-    const themeToSet = storedTheme || initialTheme;
+    return storedTheme || initialTheme;
-    setLocalTheme(themeToSet);
+  }, [location.pathname, params, getTheme, subplebbits, initialTheme]);
-    updateThemeClass(themeToSet);
-  }, [initialTheme, location.pathname, params, getTheme, themesLoaded, subplebbits]);
 
-  const setSubplebbitTheme = async (newTheme: string) => {
+  useEffect(() => {
+    const initializeTheme = async () => {
+      await loadThemes();
+      const currentTheme = getCurrentTheme();
+      updateThemeClass(currentTheme);
+    };
+
+    initializeTheme();
+  }, [loadThemes, getCurrentTheme]);
+
+  const setSubplebbitTheme = useCallback(
+    async (newTheme: string) => {
       const subplebbitAddress = params?.subplebbitAddress;
       const isInAllView = isAllView(location.pathname, params);
       const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
@@ -76,11 +73,15 @@ const useTheme = (): [string, (theme: string) => void] => {
         }
       }
 
-    setLocalTheme(newTheme);
+      setUserSetTheme(newTheme);
       updateThemeClass(newTheme);
-  };
+    },
+    [location.pathname, params, setThemeStore, subplebbits],
+  );
 
-  return [theme, setSubplebbitTheme];
+  const currentTheme = userSetTheme || getCurrentTheme();
+
+  return [currentTheme, setSubplebbitTheme];
 };
 
 export default useTheme;