[BUG] React 19 ref cleanup is not respected

[Malien]

React 19 added ref cleanup functions, and deprecated the current "call with null on unmount" behaviour.

https://codesandbox.io/p/devbox/66jh5j

<div
  ref={(instance: HTMLDivElement) => {
    doAction(instance)
    return () => cleanup()
  })
/>

// mount: const cleanup = ref(div)
// unmount: clenaup()

vs

<div
  ref={(instance: HTMLDivElement | null) => {
    if (instance) doAction(instance)
    else cleanup()
  })
/>

// mount: ref(div)
// unmount: ref(null)

When the ref callback returns a cleanup function, the callback won't be called again with the null value. Instead the cleanup function will be called.

Motion components (motion.div) don't respect that convention and will always do the null thing.

<motion.div
  ref={(instance: HTMLDivElement) => {
    doAction(instance)
    return () => cleanup()
  })
/>

// mount: ref(div)
// unmount: ref(null)

[AmitSingh-5600]

Hi @Malien ,

I’ve started looking into this issue and would like to work on a fix. Could you please assign this issue to me?