Using the callback ref on animated element (React Spring) causes a cleanup ↻ install loop

[peeke]

When you pass the ref useElementSize gives you to an animated.div (react-spring), it'll trigger some infinite logic, causing the observer callback to get called over and over. Interestingly, the createObserver function is not called again.

This code triggers the issue:

function Stretch() {
  const { size: { width }, ref: elementRef } = useElementSize()
  const animatedProps = useSpring({
    opacity: 300 / Math.max(1, width)
  })

  return (
    <animated.div ref={elementRef} className={styles.componentStretch} style={animatedProps}/>
  )
}

This doesn't:

function Stretch() {
  const { size: { width }, ref: elementRef } = useElementSize()
  const animatedProps = useSpring({
    opacity: 300 / Math.max(1, width)
  })

  return (
    <div ref={elementRef}>
      <animated.div className={styles.componentStretch} style={animatedProps}/>
    </div>
  )
}

[EECOLOR]

Does the width or height value change at all during this loop?

[EECOLOR]

Can you create an example in a branch with this behavior?

[peeke]

Yes, I've pushed issue-6, containing the example above. You'll see the console.log('observer cb', entry.contentRect.width) statement executing very often.

The width of the element is not animated. Seems like it has something to do with how React Spring handles refs on animated elements.

[EECOLOR]

Ok, so I narrowed it down to this:

import { animated } from 'react-spring'

export default function App() {
  const [bool, setBool] = React.useState(false)
  const ref1 = React.useCallback(node => { console.log('ref1', node) }, [])
  const ref2 = React.useCallback(node => { console.log('ref2', node) }, [])
  return (
    <div>
      <div ref={ref1}>1</div>
      <animated.div ref={ref2}>2</animated.div>
      <button onClick={() => setBool(x => !x)}>Rerender</button>
    </div>
  )
}

Output on first render is this:

ref1 <div>​1​</div>​
ref2 <div>​2​</div>​
ref2 <div>​2​</div>​

On subsequent clicks:

ref2 null
ref2 null
ref2 <div>​2​</div>​
ref2 <div>​2​</div>​

So there is a clear behavior difference. We can solve half of the problem by checking if the same node is supplied twice. Getting a null however is weird. I think we should create a CodePen (or similar) and file a ticket at react-spring.

[EECOLOR]

I created a ticket for react-spring: pmndrs/react-spring#1037