CODEWITHSUNDEEP
javascriptreactjsreact-spring
nonopolarity
nonopolarity

Reputation: 151234

Why does react-spring not repeatedly work?

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?

Upvotes: 0

Views: 1241

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

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});

Upvotes: 1

Related Questions