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);
 
-  if (isInPendingPostView) {
+  let initialTheme = 'yotsuba';
-    return currentTheme || 'yotsuba';
+
-  } else if (isInAllView || isInSubscriptionsView) {
+  useEffect(() => {
-    return getTheme('sfw') || 'yotsuba-b';
+    let theme = 'yotsuba';
-  } else if (isInHomeView || isInNotFoundView) {
+
-    return 'yotsuba';
+    if (isInPendingPostView) {
-  } else if (subplebbitAddress) {
+      theme = currentTheme || 'yotsuba';
-    const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+    } else if (isInAllView || isInSubscriptionsView) {
-    if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+      theme = getTheme('sfw') || 'yotsuba-b';
-      return getTheme('nsfw') || 'yotsuba';
+    } else if (isInHomeView || isInNotFoundView) {
+      theme = 'yotsuba';
+    } else if (subplebbitAddress) {
+      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+      if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+        theme = getTheme('nsfw') || 'yotsuba';
+      } else {
+        theme = getTheme('sfw') || 'yotsuba-b';
+      }
     }
-    return getTheme('sfw') || 'yotsuba-b';
+
-  }
+    initialTheme = theme;
-  return 'yotsuba';
+  }, [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,32 +43,45 @@ 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 subplebbitAddress = params?.subplebbitAddress;
+    const initializeTheme = async () => {
-    const isInAllView = isAllView(location.pathname, params);
+      await loadThemes();
-    const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+      const currentTheme = getCurrentTheme();
+      updateThemeClass(currentTheme);
+    };
 
-    if (isInAllView || isInSubscriptionsView) {
+    initializeTheme();
-      await setThemeStore('sfw', newTheme);
+  }, [loadThemes, getCurrentTheme]);
-    } else if (subplebbitAddress) {
+
-      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+  const setSubplebbitTheme = useCallback(
-      if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+    async (newTheme: string) => {
-        await setThemeStore('nsfw', newTheme);
+      const subplebbitAddress = params?.subplebbitAddress;
-      } else {
+      const isInAllView = isAllView(location.pathname, params);
+      const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+
+      if (isInAllView || isInSubscriptionsView) {
         await setThemeStore('sfw', newTheme);
+      } else if (subplebbitAddress) {
+        const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+        if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+          await setThemeStore('nsfw', newTheme);
+        } else {
+          await setThemeStore('sfw', newTheme);
+        }
       }
-    }
 
-    setLocalTheme(newTheme);
+      setUserSetTheme(newTheme);
-    updateThemeClass(newTheme);
+      updateThemeClass(newTheme);
-  };
+    },
+    [location.pathname, params, setThemeStore, subplebbits],
+  );
 
-  return [theme, setSubplebbitTheme];
+  const currentTheme = userSetTheme || getCurrentTheme();
+
+  return [currentTheme, setSubplebbitTheme];
 };
 
 export default useTheme;