title: React useState re rendering too many times
body: <p>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 <a href="https://codesandbox.io/s/small-bash-4l7ix?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/small-bash-4l7ix?file=/src/index.js</a></p>
  
  <pre><code>...
  
  const pages = [
    React.forwardRef((props, ref) =&gt; (
      &lt;animated.div ref={ref} style={{ ...props.style, background: 'lightpink' }}&gt;
        A
      &lt;/animated.div&gt;
    )),
    React.forwardRef((props, ref) =&gt; (
      &lt;animated.div ref={ref} style={{ ...props.style, background: 'lightblue' }}&gt;
        B
      &lt;/animated.div&gt;
    )),
    React.forwardRef((props, ref) =&gt; (
      &lt;animated.div ref={ref} style={{ ...props.style, background: 'lightgreen' }}&gt;
        C
      &lt;/animated.div&gt;
    )),
  ]
  
  export default function App() {
    const [index, set] = useState(0)
    const [containerRef, containerSize] = useDimensions()
  
    const transitions = useTransition(index, p =&gt; 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 (
      &lt;&gt;
        &lt;button className={`btn ${index === 0 ? 'btn--active' : ''}`} onClick={() =&gt; set(0)}&gt;
          Slide 1
        &lt;/button&gt;
        &lt;button className={`btn ${index === 1 ? 'btn--active' : ''}`} onClick={() =&gt; set(1)}&gt;
          Slide 2
        &lt;/button&gt;
        &lt;button className={`btn ${index === 2 ? 'btn--active' : ''}`} onClick={() =&gt; set(2)}&gt;
          Slide 3
        &lt;/button&gt;
  
        &lt;div style={divStyle} className="simple-trans-main"&gt;
          {transitions.map(({ item, props, key }) =&gt; {
            const Page = pages[item]
            return &lt;Page ref={containerRef} key={key} style={props} /&gt;
          })}
        &lt;/div&gt;
        &lt;p&gt; Lorem ipusum&lt;/p&gt;
      &lt;/&gt;
    )
  }
  
  ...
  </code></pre>