Why does react-spring not repeatedly work?

Question

I am trying react-spring together with useInterval:

https://codesandbox.io/s/mutable-water-icy6m

export default App = () => {
  let [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  const style = useSpring({
    opacity: 1 - Math.random() / 10,
    from: { opacity: 0 + Math.random() / 10 }
  });

  return <animated.h1 style={style}>{count}</animated.h1>;
};

At first, I was using

  const style = useSpring({
    opacity: 1,
    from: { opacity: 0 }
  });

But I thought if the virtual DOM doesn't get any diff from previous values, then it won't re-render, so I added the Math.random() / 10 to change it a little bit so that it can work, but it wouldn't fade in the number every one second except the very first one. How can it be made to work?

Answer 1

If you want the animation to start again you need to set the reset flag:

const style = useSpring({
opacity: 1,
from: { opacity: 0},
reset:true});