Fixing AnimatePresence rerenders (#2744)

* Adding failing tests * Fixing rerender * Undoing test changes
motiondivision · Jul 27, 2024 · 0668c80 · 0668c80
1 parent 11523f8
commit 0668c80
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 22 deletions.
diff --git a/packages/framer-motion/src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx b/packages/framer-motion/src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx
@@ -71,6 +71,21 @@ describe("AnimatePresence", () => {
         expect(element).toHaveStyle("transform: translateX(100px)")
     })
 
+    test("Normal rerenders work as expected", async () => {
+        const Component = ({ color }: { color: string }) => {
+            return (
+                <AnimatePresence>
+                    <div style={{ backgroundColor: color }} />
+                </AnimatePresence>
+            )
+        }
+
+        const { container, rerender } = render(<Component color="red" />)
+        rerender(<Component color="green" />)
+
+        expect(container.firstChild).toHaveStyle("background-color: green")
+    })
+
     test("Animates out a component when its removed", async () => {
         const opacity = motionValue(1)
 

diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -6,7 +6,7 @@ import { LayoutGroupContext } from "../../context/LayoutGroupContext"
 import { invariant } from "../../utils/errors"
 import { useIsomorphicLayoutEffect } from "../../three-entry"
 import { useConstant } from "../../utils/use-constant"
-import { ComponentKey, arrayEquals, getChildKey, onlyElements } from "./utils"
+import { ComponentKey, getChildKey, onlyElements } from "./utils"
 
 /**
  * `AnimatePresence` enables the animation of components that have been removed from the tree.
@@ -137,17 +137,7 @@ export const AnimatePresence: React.FunctionComponent<
             nextChildren = exitingChildren
         }
 
-        nextChildren = onlyElements(nextChildren)
-
-        const childrenHaveChanged = !arrayEquals(
-            nextChildren.map(getChildKey),
-            renderedChildren.map(getChildKey)
-        )
-
-        if (childrenHaveChanged) {
-            setRenderedChildren(nextChildren)
-        }
-
+        setRenderedChildren(onlyElements(nextChildren))
         setDiffedChildren(presentChildren)
 
         /**

diff --git a/packages/framer-motion/src/components/AnimatePresence/utils.ts b/packages/framer-motion/src/components/AnimatePresence/utils.ts
@@ -15,13 +15,3 @@ export function onlyElements(children: ReactNode): ReactElement<any>[] {
 
     return filtered
 }
-
-export function arrayEquals(a: any[], b: any[]) {
-    if (a.length !== b.length) return false
-
-    for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i]) return false
-    }
-
-    return true
-}