Skip to content

[BUG] - AnimatePresence enter/exit tracking broken inside React.StrictMode #3746

Description

@acd02

1. Describe the bug
When using AnimatePresence inside React.StrictMode, animations behave non-deterministically in development. Components that persist across a dataset change (i.e. they exist in both the before and after state) may disappear and reappear instead of animating, and their initial values are re-applied as if they are freshly entering. The behavior is inconsistent, it can work on one render and break on the next page refresh.

This appears to be caused by StrictMode's double-mount behavior in development, which confuses AnimatePresence's internal enter/exit tracking.

removing StrictMode fixes the issue ✅

There may be no workaround, and that wouldn't be the end of the world since ⁠StrictMode checks only run in dev, or perhaps my code isn't following best practices?

2. Steps to reproduce

  1. Open the CodeSandbox
  2. Click Switch dataset (observe the red bar translating on its Y axis)
  3. Wait for the transition to complete
  4. Click Switch dataset again , observe the red bar: instead of translating on Y, it disappears and reappears in its new position, and its width animates from 0

3. Expected behavior
Components whose key exists in both the previous and new dataset should animate their changed props.Only components whose key is genuinely new should play their enter animation.

4. Video or screenshots*
expected: ✅
Video below is without StrictMode
Image

current: ❌
Video below uses ⁠StrictMode. The issue can be observed when clicking on Switch dataset for the 2nd time.
Image

7. Environment details

  • motion: 12.40.0
  • react: 19.2.4
  • react-dom: 19.2.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions