Not working with AnimatePresence in 2.0

Based on the example from the release notes:

function New() {
  const [ isOpen, setOpen ] = React.useState( false )

  const { layerProps, triggerProps, renderLayer } = useLayer({ isOpen })

  return (
    <AnimatePresence>
      <button onClick={() => setOpen( !isOpen )} {...triggerProps}>Trigger</button>
      {isOpen && renderLayer( <motion.div {...layerProps}>Layer</motion.div> )}
    </AnimatePresence>
  )
}

This triggers the following error:

Uncaught Error: react-laag: Could not find a valid reference for the layer element. There might be 2 causes:
   - Make sure that the 'ref' is set correctly on the layer element when isOpen: true. Also make sure your component forwards the ref with "forwardRef()".
   - Make sure that you are actually rendering the layer when the isOpen prop is set to true

It does work when I replace the <AnimatePresence> with a Fragment (<>).

[rijk]

Ok, so my bad, I changed the implementation and it’s working fine. Thanks!

[everweij]

That is a valid concern, but I think this will not be so bad. v2 has a lazy strategy regarding monitoring positioning, meaning that only layers that are open are affected. Also I did some perf-measuring in a production setting (node.env === ‘production’ / without animations though). On a macbook pro (2017) calculating a single position for 1 layer takes ~ less than 0.1ms. In other words, it can take quite a lot. Haven’t tested it with lots of animations though. Will put this on my todo-list to pick up somewhere this week 😃