Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] State update after AnimatePresence is unmouted

See original GitHub issue

Describe the bug

When an exit animation is running while the <AnimatePresence/> component itself gets unmounted, you get an Can't perform a React state update on an unmounted component error.

To Reproduce Steps to reproduce the behavior:

Go to https://codesandbox.io/s/nice-vaughan-wcr1z
Click on “Toggle Content”
While the box is disappearing, click on “Toggle Container”

Expected behavior No state update should happen when the parent AnimatePresence is unmounted

Desktop (please complete the following information):

OS: MacOS
Browser: Chrome
Version: latest

Issue Analytics

State:
Created 4 years ago
Reactions:5
Comments:6

Top GitHub Comments

5reactions

jrmyiocommented, Dec 16, 2019

I think i am still running into this issue even at 1.7.

https://codesandbox.io/s/blissful-cache-9mmh7

0reactions

zanonacommented, Oct 5, 2020

For anyone getting to this issue. It seems this was fixed in version: [2.6.14] at 2020-09-18.

It looks like that’s indeed the the case. I’ve upgraded and no longer seeing those errors. Thanks for letting us know.

Top Results From Across the Web

[BUG] AnimatePresence does not work under certain conditions

Although the hook won't be called after the component is unmounted from the perspective of React, if that hook returns a ref stored...

Framer-motion exit animation on unmounted component

Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props...

Exit animation with `framer-motion` demystified

The final step is to re-render the AnimatePresence component when all the exit animation are finished to render the right React elements. After...

AnimatePresence | Framer for Developers

Notifies components when they're going to be unmounted and; Allows them to defer that unmounting until after an operation is complete (for instance...

Email client - Framer Motion Recipes - Build UI

Email client. Add animation to unmounting elements using the versatile AnimatePresence component. Framer Motion Recipes. 8 lessons · 03:08:13.