Fix useEffect cleaning (sort of)

storybookjs · May 22, 2024 · d453075 · d453075
1 parent ca12ad6
commit d453075
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 25 deletions.
diff --git a/apps/frontpage/components/home/hero/manager/component.tsx b/apps/frontpage/components/home/hero/manager/component.tsx
@@ -1,3 +1,4 @@
+import type { ValueAnimationTransition } from 'framer-motion';
 import { motion, useAnimate } from 'framer-motion';
 import { useEffect } from 'react';
 import { ComponentImage } from './component-image';
@@ -11,33 +12,63 @@ export const Component = () => {
   const [scopeAddToCart, animateAddToCart] = useAnimate();
 
   useEffect(() => {
-    void (async () => {
-      await animate(
-        scope.current,
+    let isCancelled = false;
+
+    const enterAnimation = async () => {
+      const animateIfNotCancelled = async (
+        animation: { opacity?: number; y?: number; fill?: string },
+        options: ValueAnimationTransition,
+      ) => {
+        if (!isCancelled && scope.current) {
+          await animate(scope.current, animation, options);
+        }
+      };
+
+      await animateIfNotCancelled(
         { opacity: 1, y: 0, fill: '#000' },
         { duration: DURATION, delay: DELAY },
       );
-      await animate(
-        scope.current,
+      await animateIfNotCancelled(
         { fill: '#fff' },
         { duration: DURATION, delay: 1.15 },
       );
-    })();
+    };
+
+    void enterAnimation();
+
+    return () => {
+      isCancelled = true;
+    };
   }, [animate, scope]);
 
   useEffect(() => {
-    void (async () => {
-      await animateAddToCart(
-        scopeAddToCart.current,
+    let isCancelled = false;
+
+    const enterAnimation = async () => {
+      const animateIfNotCancelled = async (
+        animation: { fill?: string; opacity?: number },
+        options: ValueAnimationTransition,
+      ) => {
+        if (!isCancelled && scopeAddToCart.current) {
+          await animateAddToCart(scopeAddToCart.current, animation, options);
+        }
+      };
+
+      await animateIfNotCancelled(
         { opacity: 0.6, fill: '#666D82' },
         { duration: DURATION, delay: DELAY },
       );
-      await animateAddToCart(
-        scopeAddToCart.current,
+      await animateIfNotCancelled(
         { fill: '#fff' },
         { duration: DURATION, delay: 1.15 },
       );
-    })();
+    };
+
+    void enterAnimation();
+
+    return () => {
+      isCancelled = true;
+    };
   }, [animateAddToCart, scopeAddToCart]);
 
   return (

diff --git a/apps/frontpage/components/home/hero/manager/slide-controls.tsx b/apps/frontpage/components/home/hero/manager/slide-controls.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import type { ValueAnimationTransition } from 'framer-motion';
 import { motion, useAnimate } from 'framer-motion';
 import { UndoIcon } from '@storybook/icons';
 import Image from 'next/image';
@@ -14,35 +15,55 @@ export const SlideControls = () => {
   const [scope, animate] = useAnimate();
 
   useEffect(() => {
-    void (async () => {
-      await animate(scope.current, { y: 280 });
-      await animate(
-        scope.current,
+    let isCancelled = false;
+    const enterAnimation = async () => {
+      const animateIfNotCancelled = async (
+        animation: {
+          opacity?: number;
+          scale?: number;
+          x?: number;
+          y?: number;
+          fill?: string;
+        },
+        options?: ValueAnimationTransition,
+      ) => {
+        if (!isCancelled && scope.current) {
+          await animate(scope.current, animation, options);
+        }
+      };
+
+      await animateIfNotCancelled({ y: 280 });
+      await animateIfNotCancelled(
         {
           x: 210,
           y: 200,
           opacity: 1,
         },
         { duration: 0.4 },
       );
-      await animate(
-        scope.current,
+      await animateIfNotCancelled(
         { scale: 0.8 },
         { duration: 0.1, delay: 0.2 },
       );
-      await animate(scope.current, { scale: 1 }, { duration: 0.1 });
-      await animate(
-        scope.current,
+      await animateIfNotCancelled({ scale: 1 }, { duration: 0.1 });
+      await animateIfNotCancelled(
         { x: 240, y: 256 },
         { duration: 0.1, delay: 1 },
       );
-      await animate(
-        scope.current,
+      await animateIfNotCancelled(
         { scale: 0.8 },
         { duration: 0.1, delay: 0.2 },
       );
-      await animate(scope.current, { scale: 1 }, { duration: 0.1 });
-    })();
+      await animateIfNotCancelled({ scale: 1 }, { duration: 0.1 });
+    };
+
+    if (scope.current) {
+      void enterAnimation();
+    }
+
+    return () => {
+      isCancelled = true;
+    };
   }, [animate, scope]);
 
   return (