Noah/fix window reference (#77)

* fix: move window into useEffect * fix: remove news state dependency from useEffect
calblueprint · May 27, 2024 · 8745949 · 8745949
1 parent 8e0ff6d
commit 8745949
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 26 deletions.
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
@@ -24,7 +24,7 @@ export default function App() {
       setNews(fetchedNews);
     };
     getNews();
-  }, [news]);
+  }, []);
   return (
     <div className="bg-ivory h-full">
       <NavBar />

diff --git a/src/app/testing/page.tsx b/src/app/testing/page.tsx
diff --git a/src/components/userComponents/Footer/Footer.tsx b/src/components/userComponents/Footer/Footer.tsx
@@ -344,12 +344,14 @@ export default function Footer() {
   const [inputValueEmail, setEmailValue] = useState('');
   const [showError, setShowError] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
-
-  const subbed = () =>
-    Boolean(JSON.parse(window.sessionStorage.getItem('subscribed') || 'false'));
-  const [subscribed, setSubscribed] = useState(subbed);
+  const [subscribed, setSubscribed] = useState(false);
 
   useEffect(() => {
+    const subbed = () =>
+      Boolean(
+        JSON.parse(window.sessionStorage.getItem('subscribed') || 'false'),
+      );
+    setSubscribed(subbed);
     window.sessionStorage.setItem('subscribed', subscribed.toString());
   }, [subscribed]);
 

diff --git a/src/components/userComponents/HomePageComponents/HomeNewsFeed/HomeNewsFeed.tsx b/src/components/userComponents/HomePageComponents/HomeNewsFeed/HomeNewsFeed.tsx
@@ -23,12 +23,12 @@ function HomeNewsFeed() {
       setNews(topThreeNews);
     };
     getNews();
-  }, [news]);
+  }, []);
 
   return (
     <div
       className="w-full flex flex-row px-2.5 py-20 web:px-56 web:py-28 gap-40
-     justify-center items-center justify-start"
+     justify-center items-center"
     >
       {isWebDevice && (
         <img

diff --git a/src/context/WindowWidthContext/WindowWidthContext.tsx b/src/context/WindowWidthContext/WindowWidthContext.tsx
@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useContext,
   useMemo,
+  useCallback,
 } from 'react';
 
 interface WindowWidthContextProps {
@@ -29,15 +30,18 @@ export function WindowWidthProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const [isWeb, setIsWeb] = useState(window.innerWidth >= 1024);
+  const [isWeb, setIsWeb] = useState(false);
+  const handleResize = useCallback(() => {
+    setIsWeb(window.innerWidth >= 1024);
+  }, []);
 
   useEffect(() => {
-    const handleResize = () => setIsWeb(window.innerWidth >= 1024);
+    handleResize();
     window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [handleResize]);
 
   const windowWidthValue = useMemo(() => ({ isWeb }), [isWeb]);