From 1e7f9df3c81d214a977a796d182e18c47d4c7e81 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Thu, 31 Oct 2024 10:48:46 +0100 Subject: [PATCH 1/2] Fix double .update() call on mount --- packages/framer-motion/src/motion/utils/use-visual-element.ts | 4 +++- 1 file changed, 3 insertions(+), 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 index 9c46c31ad0..b6e6d7650e 100644 --- a/packages/framer-motion/src/motion/utils/use-visual-element.ts +++ b/packages/framer-motion/src/motion/utils/use-visual-element.ts @@ -73,7 +73,9 @@ export function useVisualElement( } useInsertionEffect(() => { - visualElement && visualElement.update(props, presenceContext) + if (visualElement && visualElement.current) { + visualElement && visualElement.update(props, presenceContext) + } }) /** From c3593da562b9948e3e53d1d3df111a8f85ae5ced Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Thu, 31 Oct 2024 11:01:10 +0100 Subject: [PATCH 2/2] Fixing --- .../src/motion/utils/use-visual-element.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/framer-motion/src/motion/utils/use-visual-element.ts b/packages/framer-motion/src/motion/utils/use-visual-element.ts index b6e6d7650e..664e1f6584 100644 --- a/packages/framer-motion/src/motion/utils/use-visual-element.ts +++ b/packages/framer-motion/src/motion/utils/use-visual-element.ts @@ -72,9 +72,14 @@ export function useVisualElement( ) } + const isMounted = useRef(false) useInsertionEffect(() => { - if (visualElement && visualElement.current) { - 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) } }) @@ -93,6 +98,7 @@ export function useVisualElement( useIsomorphicLayoutEffect(() => { if (!visualElement) return + isMounted.current = true window.MotionIsMounted = true visualElement.updateFeatures()