Using AnimatePresence from motion/react with Collections (e.g. GridList)

[schurchleycci]

In the docs, there's an example for a GridList with AnimatePresence that uses array.map to handle the rendering of the GridListItems. Is there a way to use AnimatePresence that uses the patterns in the Collection docs instead? When I try this none of the items get rendered - I assume there's some sort of conflict going on between AnimatePresence and the GridList both trying to manage the lifecycle of the GridListItems.

[devongovett]

I think not because AnimatePresence relies on the items being direct children. If you use the items prop of GridList, the children function must be directly inside, not AnimatePresence. And AnimatePresence can't be outside the GridList because it only applies to its direct children. So I think array.map is the only way in this case.

The performance benefit of Collections is mainly just automatic memoization. You can implement that yourself instead if you find it beneficial (always measure first!). This is basically what the collection implementation does:

let cache = useMemo(() => new WeakMap(), []);

<GridList>
  <AnimatePresence>
    {/* memoize in case the array didn't change */}
    {useMemo(() => array.map(item => {
      // Check if we have an already rendered element for this item.
      let cached = cache.get(item);
      if (cached) return cached;

      let rendered = <MotionItem ... />;
      cache.set(item, rendered);
      return rendered;
    }, [array])}
  </AnimatePresence>
</GridList>

[schurchleycci]

I suspected as much, thanks for the help! I was thinking about adding enter/exit animations to a styled wrapper on the GridList, so my primary concern was not breaking the Collection approach rather than its memoization benefits. But this gives me a good sense of what my options are. Thank you again!