Search code examples
javascriptreactjsreact-spring

React useState re rendering too many times

I am creating a simple carousel with react and I noticed that my index gets call multiple times and I don't understand why, here is my snippet of code here also here is a full version https://codesandbox.io/s/small-bash-4l7ix?file=/src/index.js

...

const pages = [
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightpink' }}>
      A
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightblue' }}>
      B
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightgreen' }}>
      C
    </animated.div>
  )),
]

export default function App() {
  const [index, set] = useState(0)
  const [containerRef, containerSize] = useDimensions()

  const transitions = useTransition(index, p => p, {
    from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
    enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
  })
  const divStyle = {
    height: `${containerSize.height}px`,
  }

  console.log(index)
  return (
    <>
      <button className={`btn ${index === 0 ? 'btn--active' : ''}`} onClick={() => set(0)}>
        Slide 1
      </button>
      <button className={`btn ${index === 1 ? 'btn--active' : ''}`} onClick={() => set(1)}>
        Slide 2
      </button>
      <button className={`btn ${index === 2 ? 'btn--active' : ''}`} onClick={() => set(2)}>
        Slide 3
      </button>

      <div style={divStyle} className="simple-trans-main">
        {transitions.map(({ item, props, key }) => {
          const Page = pages[item]
          return <Page ref={containerRef} key={key} style={props} />
        })}
      </div>
      <p> Lorem ipusum</p>
    </>
  )
}

...
Solution

  • In order to transition components in and out the useTransition hook from react-spring keeps track of component instances for you. These extra renders are caused by overlapping mounting and unmounting of nodes.

    For example:

    1. Start at 'Slide 1'
    2. Click 'Slide 2'
    3. Library mounts 'Slide 2' // Triggers rerender
    4. Library starts to transition 'Slide 1' out
    5. Library unmounts 'Slide 1' // Triggers rerender

    Each transition is pushed into the array and the library animates them in order. So you can trigger multiple overlapping animations simultaneously.

    Checkout the React DevTools in the codesandbox and you will see the nodes mounting and unmounting.

    React Devtools in codesandbox