Merge pull request #2852 from framer/fix/double-mount-update

Fix double `.update()` call on mount
motiondivision · Oct 31, 2024 · f3468b3 · f3468b3
2 parents c02ec5a + c3593da
commit f3468b3
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts
@@ -72,8 +72,15 @@ export function useVisualElement<Instance, RenderState>(
         )
     }
 
+    const isMounted = useRef(false)
     useInsertionEffect(() => {
-        visualElement && visualElement.update(props, presenceContext)
+        /**
+         * Check the component has already mounted before calling
+         * `update` unnecessarily. This ensures we skip the initial update.
+         */
+        if (visualElement && isMounted.current) {
+            visualElement.update(props, presenceContext)
+        }
     })
 
     /**
@@ -91,6 +98,7 @@ export function useVisualElement<Instance, RenderState>(
     useIsomorphicLayoutEffect(() => {
         if (!visualElement) return
 
+        isMounted.current = true
         window.MotionIsMounted = true
 
         visualElement.updateFeatures()