Merge pull request #587 from AFP-Medialab/586-repeated-image-fetch

Separate effect dependencies to avoid infinite loop (#586)
AFP-Medialab · Sep 13, 2024 · 36dcea3 · 36dcea3
2 parents c44d484 + 24dfdc3
commit 36dcea3
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/src/components/NavItems/tools/Gif/Components/TextImageCanvas.jsx b/src/components/NavItems/tools/Gif/Components/TextImageCanvas.jsx
@@ -42,14 +42,12 @@ const TextImageCanvas = ({
 
   // loads image
   useEffect(() => {
-    async function loadAndPreloadImage() {
-      const loadedImg = await preloadImage(imgSrc);
-      setImg(loadedImg);
-    }
+    preloadImage(imgSrc).then(setImg);
+  }, [imgSrc]);
 
-    loadAndPreloadImage();
+  useEffect(() => {
     if (img) handleExport();
-  }, [imgSrc, img]);
+  }, [img]);
 
   if (img) {
     //calculates width and height used for the canvas, to have the same proportions as the image