Fix useEffect web component warnings (#674)

closes #668

---------

Co-authored-by: magdalenajadach <[email protected]>
Co-authored-by: MagdalenaJadach <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Fix useEffect missing dependencies (#674)
+
 ### Changed
 
 - Performance enhancements on app routes & sense hat transitions (#686)

src/components/WebComponentProject/WebComponentProject.jsx

@@ -24,25 +24,25 @@ const WebComponentProject = () => {
     ? "dark"
     : "light";
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
-  const [timeoutId, setTimeoutId] = React.useState(null);
   const webComponent = document.querySelector("editor-wc");
   const [codeHasRun, setCodeHasRun] = React.useState(false);
   const dispatch = useDispatch();
-  dispatch(setIsSplitView(false));
+  useEffect(() => {
+    dispatch(setIsSplitView(false));
+  }, [dispatch]);
 
   useEffect(() => {
     setCodeHasRun(false);
-    if (timeoutId) clearTimeout(timeoutId);
-    const id = setTimeout(function () {
+    const timeout = setTimeout(() => {
       const customEvent = new CustomEvent("codeChanged", {
         bubbles: true,
         cancelable: false,
         composed: true,
       });
       webComponent.dispatchEvent(customEvent);
     }, 2000);
-    setTimeoutId(id);
-  }, [project]);
+    return () => clearTimeout(timeout);
+  }, [project, webComponent]);
 
   useEffect(() => {
     if (codeRunTriggered) {
@@ -69,7 +69,7 @@ const WebComponentProject = () => {
       });
       webComponent.dispatchEvent(runCompletedEvent);
     }
-  }, [codeRunTriggered]);
+  }, [codeRunTriggered, codeHasRun, webComponent]);
 
   return (
     <>