Don't rely on effect execution order when passing around the layout o…

…f Reorder.Items
framer · Jul 15, 2023 · 6a7cafe · 6a7cafe
1 parent 10bfeac
commit 6a7cafe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 21 deletions.
diff --git a/packages/framer-motion/src/components/Reorder/Group.tsx b/packages/framer-motion/src/components/Reorder/Group.tsx
@@ -85,16 +85,15 @@ export function ReorderGroup<V>(
     const context: ReorderContextProps<any> = {
         axis,
         registerItem: (value, layout) => {
-            /**
-             * Ensure entries can't add themselves more than once
-             */
-            if (
-                layout &&
-                order.findIndex((entry) => value === entry.value) === -1
-            ) {
-                order.push({ value, layout: layout[axis] })
-                order.sort(compareMin)
+            if (!layout) return;
+            // If the entry was already added, update it rather than adding it again
+            const idx = order.findIndex((entry) => value === entry.value)
+            if (idx !== -1) {
+                order[idx].layout = layout[axis]
+            } else {
+                order.push({ value: value, layout: layout[axis] })
             }
+            order.sort(compareMin)
         },
         updateOrder: (id, offset, velocity) => {
             if (isReordering.current) return

diff --git a/packages/framer-motion/src/components/Reorder/Item.tsx b/packages/framer-motion/src/components/Reorder/Item.tsx
@@ -4,12 +4,9 @@ import {
     ReactHTML,
     FunctionComponent,
     useContext,
-    useEffect,
-    useRef,
     forwardRef,
 } from "react"
 import { ReorderContext } from "../../context/ReorderContext"
-import { Box } from "../../projection/geometry/types"
 import { motion } from "../../render/dom/motion"
 import { HTMLMotionProps } from "../../render/html/types"
 import { useConstant } from "../../utils/use-constant"
@@ -71,16 +68,10 @@ export function ReorderItem<V>(
         latestX || latestY ? 1 : "unset"
     )
 
-    const measuredLayout = useRef<Box | null>(null)
-
     invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group")
 
     const { axis, registerItem, updateOrder } = context!
 
-    useEffect(() => {
-        registerItem(value, measuredLayout.current!)
-    }, [context])
-
     return (
         <Component
             drag={axis}
@@ -95,9 +86,7 @@ export function ReorderItem<V>(
 
                 onDrag && onDrag(event, gesturePoint)
             }}
-            onLayoutMeasure={(measured) => {
-                measuredLayout.current = measured
-            }}
+            onLayoutMeasure={(measured) => registerItem(value, measured)}
             ref={externalRef}
             ignoreStrict
         >