framer-motion 6.2.4 → 6.2.5

package/dist/cjs/index.js

@@ -4349,6 +4349,12 @@ var gestureAnimations = {
     hover: makeRenderlessComponent(useHoverGesture),
 };
 
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = React__namespace.useId
+    ? React__namespace.useId
+    : function () { return useConstant(incrementId); };
+
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.
@@ -4379,8 +4385,8 @@ function usePresence() {
     var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
-    // Replace with useOpaqueId when released in React
-    var id = useUniqueId();
+    // Replace with useId when released in React
+    var id = useId();
     React.useEffect(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -4411,9 +4417,6 @@ function useIsPresent() {
 function isPresent(context) {
     return context === null ? true : context.isPresent;
 }
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useUniqueId = function () { return useConstant(incrementId); };
 
 function shallowCompare(next, prev) {
     if (!Array.isArray(prev))
@@ -6118,6 +6121,7 @@ var visualElement = function (_a) {
                 if (isVariantNode && parent && !isControllingVariants) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
+                values.forEach(function (value, key) { return bindToMotionValue(key, value); });
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                 element.setProps(props);
             }, 
@@ -7098,12 +7102,22 @@ function createDomMotionComponent(key) {
  */
 var m = createMotionProxy(createDomMotionConfig);
 
+function useIsMounted() {
+    var isMounted = React.useRef(false);
+    React.useLayoutEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
 function useForceUpdate() {
-    var isUnmountingRef = React.useRef(false);
+    var isMounted = useIsMounted();
     var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
     var forceRender = React.useCallback(function () {
-        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
     }, [forcedRenderCount]);
     /**
      * Defer this to the end of the next animation frame in case there are multiple
@@ -7113,16 +7127,10 @@ function useForceUpdate() {
     return [deferredForceRender, forcedRenderCount];
 }
 
-var presenceId = 0;
-function getPresenceId() {
-    var id = presenceId;
-    presenceId++;
-    return id;
-}
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
     var presenceChildren = useConstant(newChildrenMap);
-    var id = useConstant(getPresenceId);
+    var id = useId();
     var context = React.useMemo(function () { return ({
         id: id,
         initial: initial,
@@ -7174,17 +7182,14 @@ function newChildrenMap() {
     return new Map();
 }
 
-function getChildKey(child) {
-    return child.key || "";
-}
+var getChildKey = function (child) { return child.key || ""; };
+var isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
-    var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
+    var seenChildren = isDev ? new Set() : null;
     children.forEach(function (child) {
         var key = getChildKey(child);
-        if (process.env.NODE_ENV !== "production" && seenChildren) {
-            if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-            }
+        if (isDev && seenChildren && seenChildren.has(key)) {
+            console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             seenChildren.add(key);
         }
         allChildren.set(key, child);
@@ -7240,29 +7245,34 @@ var AnimatePresence = function (_a) {
     var forceRenderLayoutGroup = React.useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
-    var isInitialRender = React.useRef(true);
-    var isMounted = React.useRef(true);
-    React.useEffect(function () { return function () {
-        isMounted.current = false;
-    }; }, []);
+    var isMounted = useIsMounted();
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
+    var childrenToRender = filteredChildren;
+    var exiting = new Set();
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
-    var presentChildren = React.useRef(filteredChildren);
+    var presentChildren = React.useRef(childrenToRender);
     // A lookup table to quickly reference components by key
     var allChildren = React.useRef(new Map()).current;
-    // A living record of all currently exiting components.
-    var exiting = React.useRef(new Set()).current;
-    updateChildLookup(filteredChildren, allChildren);
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
-    if (isInitialRender.current) {
+    var isInitialRender = React.useRef(true);
+    useIsomorphicLayoutEffect(function () {
         isInitialRender.current = false;
-        return (React__namespace.createElement(React__namespace.Fragment, null, filteredChildren.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(function () {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exiting.clear();
+    });
+    if (isInitialRender.current) {
+        return (React__namespace.createElement(React__namespace.Fragment, null, childrenToRender.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = tslib.__spreadArray([], tslib.__read(filteredChildren), false);
+    childrenToRender = tslib.__spreadArray([], tslib.__read(childrenToRender), false);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -7274,10 +7284,6 @@ var AnimatePresence = function (_a) {
         if (targetKeys.indexOf(key) === -1) {
             exiting.add(key);
         }
-        else {
-            // In case this key has re-entered, remove from the exiting list
-            exiting.delete(key);
-        }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
@@ -7303,9 +7309,8 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
-                if (isMounted.current === false) {
+                if (isMounted.current === false)
                     return;
-                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }
@@ -7318,7 +7323,6 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    presentChildren.current = childrenToRender;
     if (process.env.NODE_ENV !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {
@@ -8289,13 +8293,15 @@ function useAnimatedState(initialState) {
     });
     React.useEffect(function () {
         element.mount({});
-        return element.unmount();
-    }, []);
+        return element.unmount;
+    }, [element]);
     React.useEffect(function () {
         element.setProps({
-            onUpdate: function (v) { return setAnimationState(tslib.__assign({}, v)); },
+            onUpdate: function (v) {
+                setAnimationState(tslib.__assign({}, v));
+            },
         });
-    });
+    }, [setAnimationState, element]);
     var startAnimation = useConstant(function () { return function (animationDefinition) {
         return animateVisualElement(element, animationDefinition);
     }; });

package/dist/es/animation/use-animated-state.mjs

@@ -43,13 +43,15 @@ function useAnimatedState(initialState) {
     });
     useEffect(function () {
         element.mount({});
-        return element.unmount();
-    }, []);
+        return element.unmount;
+    }, [element]);
     useEffect(function () {
         element.setProps({
-            onUpdate: function (v) { return setAnimationState(__assign({}, v)); },
+            onUpdate: function (v) {
+                setAnimationState(__assign({}, v));
+            },
         });
-    });
+    }, [setAnimationState, element]);
     var startAnimation = useConstant(function () { return function (animationDefinition) {
         return animateVisualElement(element, animationDefinition);
     }; });

package/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -3,17 +3,12 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { useId } from '../../utils/use-id.mjs';
 
-var presenceId = 0;
-function getPresenceId() {
-    var id = presenceId;
-    presenceId++;
-    return id;
-}
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
     var presenceChildren = useConstant(newChildrenMap);
-    var id = useConstant(getPresenceId);
+    var id = useId();
     var context = useMemo(function () { return ({
         id: id,
         initial: initial,

package/dist/es/components/AnimatePresence/index.mjs

@@ -1,21 +1,21 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
-import { useContext, useRef, useEffect, cloneElement, Children, isValidElement } from 'react';
+import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { useIsMounted } from '../../utils/use-is-mounted.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
 
-function getChildKey(child) {
-    return child.key || "";
-}
+var getChildKey = function (child) { return child.key || ""; };
+var isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
-    var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
+    var seenChildren = isDev ? new Set() : null;
     children.forEach(function (child) {
         var key = getChildKey(child);
-        if (process.env.NODE_ENV !== "production" && seenChildren) {
-            if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-            }
+        if (isDev && seenChildren && seenChildren.has(key)) {
+            console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             seenChildren.add(key);
         }
         allChildren.set(key, child);
@@ -71,29 +71,34 @@ var AnimatePresence = function (_a) {
     var forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
-    var isInitialRender = useRef(true);
-    var isMounted = useRef(true);
-    useEffect(function () { return function () {
-        isMounted.current = false;
-    }; }, []);
+    var isMounted = useIsMounted();
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
+    var childrenToRender = filteredChildren;
+    var exiting = new Set();
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
-    var presentChildren = useRef(filteredChildren);
+    var presentChildren = useRef(childrenToRender);
     // A lookup table to quickly reference components by key
     var allChildren = useRef(new Map()).current;
-    // A living record of all currently exiting components.
-    var exiting = useRef(new Set()).current;
-    updateChildLookup(filteredChildren, allChildren);
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
-    if (isInitialRender.current) {
+    var isInitialRender = useRef(true);
+    useIsomorphicLayoutEffect(function () {
         isInitialRender.current = false;
-        return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(function () {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exiting.clear();
+    });
+    if (isInitialRender.current) {
+        return (React.createElement(React.Fragment, null, childrenToRender.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = __spreadArray([], __read(filteredChildren), false);
+    childrenToRender = __spreadArray([], __read(childrenToRender), false);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -105,10 +110,6 @@ var AnimatePresence = function (_a) {
         if (targetKeys.indexOf(key) === -1) {
             exiting.add(key);
         }
-        else {
-            // In case this key has re-entered, remove from the exiting list
-            exiting.delete(key);
-        }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
@@ -134,9 +135,8 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
-                if (isMounted.current === false) {
+                if (isMounted.current === false)
                     return;
-                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }
@@ -149,7 +149,6 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    presentChildren.current = childrenToRender;
     if (process.env.NODE_ENV !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {

package/dist/es/components/AnimatePresence/use-presence.mjs

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { useConstant } from '../../utils/use-constant.mjs';
+import { useId } from '../../utils/use-id.mjs';
 
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
@@ -32,8 +32,8 @@ function usePresence() {
     var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
-    // Replace with useOpaqueId when released in React
-    var id = useUniqueId();
+    // Replace with useId when released in React
+    var id = useId();
     useEffect(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -64,8 +64,5 @@ function useIsPresent() {
 function isPresent(context) {
     return context === null ? true : context.isPresent;
 }
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useUniqueId = function () { return useConstant(incrementId); };
 
 export { isPresent, useIsPresent, usePresence };

package/dist/es/render/index.mjs

@@ -161,6 +161,7 @@ var visualElement = function (_a) {
                 if (isVariantNode && parent && !isControllingVariants) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
+                values.forEach(function (value, key) { return bindToMotionValue(key, value); });
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                 element.setProps(props);
             }, 

package/dist/es/utils/use-force-update.mjs

@@ -1,14 +1,13 @@
 import { __read } from 'tslib';
 import sync from 'framesync';
-import { useRef, useState, useCallback } from 'react';
-import { useUnmountEffect } from './use-unmount-effect.mjs';
+import { useState, useCallback } from 'react';
+import { useIsMounted } from './use-is-mounted.mjs';
 
 function useForceUpdate() {
-    var isUnmountingRef = useRef(false);
+    var isMounted = useIsMounted();
     var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
     var forceRender = useCallback(function () {
-        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
     }, [forcedRenderCount]);
     /**
      * Defer this to the end of the next animation frame in case there are multiple

package/dist/es/utils/use-id.mjs

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { useConstant } from './use-constant.mjs';
+
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = React.useId
+    ? React.useId
+    : function () { return useConstant(incrementId); };
+
+export { useId };

package/dist/es/utils/use-is-mounted.mjs

@@ -0,0 +1,14 @@
+import { useRef, useLayoutEffect } from 'react';
+
+function useIsMounted() {
+    var isMounted = useRef(false);
+    useLayoutEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+export { useIsMounted };

package/dist/framer-motion.dev.js

@@ -5582,6 +5582,12 @@
         hover: makeRenderlessComponent(useHoverGesture),
     };
 
+    var counter = 0;
+    var incrementId = function () { return counter++; };
+    var useId = React__namespace.useId
+        ? React__namespace.useId
+        : function () { return useConstant(incrementId); };
+
     /**
      * When a component is the child of `AnimatePresence`, it can use `usePresence`
      * to access information about whether it's still present in the React tree.
@@ -5612,8 +5618,8 @@
         var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
         // It's safe to call the following hooks conditionally (after an early return) because the context will always
         // either be null or non-null for the lifespan of the component.
-        // Replace with useOpaqueId when released in React
-        var id = useUniqueId();
+        // Replace with useId when released in React
+        var id = useId();
         React.useEffect(function () { return register(id); }, []);
         var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
         return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -5644,9 +5650,6 @@
     function isPresent(context) {
         return context === null ? true : context.isPresent;
     }
-    var counter = 0;
-    var incrementId = function () { return counter++; };
-    var useUniqueId = function () { return useConstant(incrementId); };
 
     function shallowCompare(next, prev) {
         if (!Array.isArray(prev))
@@ -7351,6 +7354,7 @@
                     if (isVariantNode && parent && !isControllingVariants) {
                         removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                     }
+                    values.forEach(function (value, key) { return bindToMotionValue(key, value); });
                     parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                     element.setProps(props);
                 }, 
@@ -8331,12 +8335,22 @@
      */
     var m = createMotionProxy(createDomMotionConfig);
 
+    function useIsMounted() {
+        var isMounted = React.useRef(false);
+        React.useLayoutEffect(function () {
+            isMounted.current = true;
+            return function () {
+                isMounted.current = false;
+            };
+        }, []);
+        return isMounted;
+    }
+
     function useForceUpdate() {
-        var isUnmountingRef = React.useRef(false);
+        var isMounted = useIsMounted();
         var _a = __read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-        useUnmountEffect(function () { return (isUnmountingRef.current = true); });
         var forceRender = React.useCallback(function () {
-            !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+            isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
         }, [forcedRenderCount]);
         /**
          * Defer this to the end of the next animation frame in case there are multiple
@@ -8346,16 +8360,10 @@
         return [deferredForceRender, forcedRenderCount];
     }
 
-    var presenceId = 0;
-    function getPresenceId() {
-        var id = presenceId;
-        presenceId++;
-        return id;
-    }
     var PresenceChild = function (_a) {
         var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
         var presenceChildren = useConstant(newChildrenMap);
-        var id = useConstant(getPresenceId);
+        var id = useId();
         var context = React.useMemo(function () { return ({
             id: id,
             initial: initial,
@@ -8407,17 +8415,13 @@
         return new Map();
     }
 
-    function getChildKey(child) {
-        return child.key || "";
-    }
+    var getChildKey = function (child) { return child.key || ""; };
     function updateChildLookup(children, allChildren) {
         var seenChildren = new Set() ;
         children.forEach(function (child) {
             var key = getChildKey(child);
-            if (seenChildren) {
-                if (seenChildren.has(key)) {
-                    console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-                }
+            if (seenChildren && seenChildren.has(key)) {
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
                 seenChildren.add(key);
             }
             allChildren.set(key, child);
@@ -8473,29 +8477,34 @@
         var forceRenderLayoutGroup = React.useContext(LayoutGroupContext).forceRender;
         if (forceRenderLayoutGroup)
             forceRender = forceRenderLayoutGroup;
-        var isInitialRender = React.useRef(true);
-        var isMounted = React.useRef(true);
-        React.useEffect(function () { return function () {
-            isMounted.current = false;
-        }; }, []);
+        var isMounted = useIsMounted();
         // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
         var filteredChildren = onlyElements(children);
+        var childrenToRender = filteredChildren;
+        var exiting = new Set();
         // Keep a living record of the children we're actually rendering so we
         // can diff to figure out which are entering and exiting
-        var presentChildren = React.useRef(filteredChildren);
+        var presentChildren = React.useRef(childrenToRender);
         // A lookup table to quickly reference components by key
         var allChildren = React.useRef(new Map()).current;
-        // A living record of all currently exiting components.
-        var exiting = React.useRef(new Set()).current;
-        updateChildLookup(filteredChildren, allChildren);
         // If this is the initial component render, just deal with logic surrounding whether
         // we play onMount animations or not.
-        if (isInitialRender.current) {
+        var isInitialRender = React.useRef(true);
+        useIsomorphicLayoutEffect(function () {
             isInitialRender.current = false;
-            return (React__namespace.createElement(React__namespace.Fragment, null, filteredChildren.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+            updateChildLookup(filteredChildren, allChildren);
+            presentChildren.current = childrenToRender;
+        });
+        useUnmountEffect(function () {
+            isInitialRender.current = true;
+            allChildren.clear();
+            exiting.clear();
+        });
+        if (isInitialRender.current) {
+            return (React__namespace.createElement(React__namespace.Fragment, null, childrenToRender.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
         }
         // If this is a subsequent render, deal with entering and exiting children
-        var childrenToRender = __spreadArray([], __read(filteredChildren), false);
+        childrenToRender = __spreadArray([], __read(childrenToRender), false);
         // Diff the keys of the currently-present and target children to update our
         // exiting list.
         var presentKeys = presentChildren.current.map(getChildKey);
@@ -8507,10 +8516,6 @@
             if (targetKeys.indexOf(key) === -1) {
                 exiting.add(key);
             }
-            else {
-                // In case this key has re-entered, remove from the exiting list
-                exiting.delete(key);
-            }
         }
         // If we currently have exiting children, and we're deferring rendering incoming children
         // until after all current children have exiting, empty the childrenToRender array
@@ -8536,9 +8541,8 @@
                 // Defer re-rendering until all exiting children have indeed left
                 if (!exiting.size) {
                     presentChildren.current = filteredChildren;
-                    if (isMounted.current === false) {
+                    if (isMounted.current === false)
                         return;
-                    }
                     forceRender();
                     onExitComplete && onExitComplete();
                 }
@@ -8551,7 +8555,6 @@
             var key = child.key;
             return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
         });
-        presentChildren.current = childrenToRender;
         if (exitBeforeEnter &&
             childrenToRender.length > 1) {
             console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
@@ -9521,13 +9524,15 @@
         });
         React.useEffect(function () {
             element.mount({});
-            return element.unmount();
-        }, []);
+            return element.unmount;
+        }, [element]);
         React.useEffect(function () {
             element.setProps({
-                onUpdate: function (v) { return setAnimationState(__assign({}, v)); },
+                onUpdate: function (v) {
+                    setAnimationState(__assign({}, v));
+                },
             });
-        });
+        }, [setAnimationState, element]);
         var startAnimation = useConstant(function () { return function (animationDefinition) {
             return animateVisualElement(element, animationDefinition);
         }; });