[BUG] Conditionally rendered children components not staggering

1. Describe the bug

Children components wrapped in AnimatePresence don’t stagger as they should if they are not rendered initially. In provided example, you can see a comparison between child components mapped initially from static data array (works fine) and rendered conditionally, e.g. after some remote data is fetched, which is a common scenario.

2. CodeSandbox reproduction of the bug https://codesandbox.io/s/staggerchildrenissue-tkkie?file=/src/App.js

3. Steps to reproduce Refresh provided codesandbox example.

4. Expected behavior Children components rendered conditionally should be staggered the same as the ones rendering initially.

5. Environment details KDE neon 5.19, Chrome 85.0.4183.102 (Official Build) (64-bit)

[snehasis8]

It makes no sense if it’s not able to perform on the dynamic data.

[TimoP]

Edit: Inspired by @mattgperry’s comment above, I figured out the following workaround – by setting a key on the parent element to the length of the dynamic data, something like this:

Yes but that only helps if the parent did not have their own transitions. A key change would reset this transition.

The use of this feature is limited if it did not work if children get added after the parent transition start.

I have made a small Sandbox for demonstration for my ticket: Example Toggle Demo1: Expected behavior Toggle Demo2: Example with children added after timeout