I thought react-spring (useSpring) causes the component to re-render, but it may not?

[nonopolarity]

🤓 Question

I guess the main question is, how do we know what situation will react-spring re-render a lot and how to we prevent it if possible?

https://stackoverflow.com/questions/67188777/i-thought-react-spring-usespring-causes-the-component-to-re-render-but-it-may

I thought react-spring useSpring() causes the component to re-render a lot, so if it is a component that already has a lot of CPU intensively work to do, then react-spring is not best suited for the task.

However, I can see that it re-renders a lot, in:

https://codesandbox.io/s/musing-dew-9tfi9?file=/src/App.tsx

(by looking at the console.log output, which has a lot of print out of renderCount. The print out is a lot more when we change the duration to 5000 which is 5 seconds).

Likewise, if it is a component that is similar to react-spring, it'd render a lot:

https://codesandbox.io/s/wonderful-currying-9pheq

However, the following code:

let renderCount = 0

export default function App() {
  const styles = useSpring({
    loop: true,
    to: [
      { opacity: 1, color: '#ffaaee' },
      { opacity: 0.5, color: 'rgb(14,26,19)' },
      { transform: 'translateX(100px)' },
      { transform: 'translateX(0px)' },
    ],
    from: { opacity: 0, color: 'red', transform: 'translateX(0px)' },
    config: { duration: 500 },
  })

  console.log('renderCount', ++renderCount)

  return <a.div style={styles}>I will fade in and out</a.div>
}

Demo: https://codesandbox.io/s/dazzling-rgb-j2bx3?file=/src/App.tsx

We can see that the renderCount hardly get printed out at all. react-spring should need to keep on updating the style of the component, so after a minute, I'd expect a lot of print out of renderCount like the first two examples above, but it does not.

How and why doesn't react-spring cause a lot of re-rendering in this case, and how do we know in what situation would react-spring cause a lot of re-rendering (and how to prevent it)?

[joshuaellis]

The API allows spring to animate outside of the react-render loop. In the first example you shared, you're using state to dictate the props of the spring. In the third example you've shared you've got your spring defined and ready so the animated component does not need to have a re-render to have it's styles updated.

You could also look at using the Imperative API we now have which would allow you to change the state of the spring in reaction to events without updating the state of the component. So that's the kind of how and why but in summary:

HOW – the animated component
WHY – it's better and more performance efficient to be honest.

How to prevent it? IMO use the imperative api, i linked above, this is how I write all my springs and I haven't had any issues so far.

[nonopolarity]

are the docs also on the same github? the word "depreceation" need to be changed but I don't see the docs on github to make a PR.

[joshuaellis]

check out pmndrs/react-spring.io

[nonopolarity]

so you mean just change api to api.start? https://codesandbox.io/s/zen-rain-066ly?file=/src/App.js

[joshuaellis]

For your example yes. But there are more methods which can be useful

[nonopolarity]

interesting... I made an interactive example: https://codesandbox.io/s/wizardly-leaf-814y9
but maybe your readers are advanced enough to know how to do it interactively...
but does react-spring have something similar to transform: translateX(-100%) to make itself disappear by moving to the left for its whole width? (instead of a hardcoded value right now like in the example above?

[nonopolarity]

so I kind of get it... when you say imperative vs declarative... when it is done like https://codesandbox.io/s/wonderful-currying-9pheq (the shaking text)
then it is the "declarative" way... and react-spring can do it that way too... but just a lot of re-render and if the component is already too CPU intensive it may not be too good to cause a lot of re-renders