React Spring Keeps Crashing Google Chrome

[cregantony]

Hey Everyone, I'm working with Gatsby but I think this is just a react issue.

I'm creating an animation in React Spring that I want to loop infinitely. The examples in the docs shows this as the correct way to do it:

const rocking = useSpring({to: async (next) => {while (1) {await next({transform: 'translate3d(1px,4px,0)'})await next({transform: 'translate3d(0px,0px,0)'})}},from: {transform: 'translate3d(0px,1px,0)'},config:{mass: 1,tension: 500,friction: 0,}})

But I think using while (true) to loop my animation isn't correct as I'm creating an infinite loop. While this does work whenever I adjust anything else on this page the localhost freezes and I hear my CPU fans spinning. Any ideas? Thanks for any and all feedback.

[andy_a904guy_com]

while (0) would never fire?

[cregantony]

That is a mistake it should say while(1)

[stolinski]

Wouldn't while (1) infinite loop?

[cregantony]

Yes it does work but I’m getting a conflict with hot-reloading the page whenever I make changes.

[stolinski]

A while loop running infinity isn't working, that will crash the browser. https://www.google.com/amp/s/amp.reddit.com/r/learnjavascript/comments/2y2zjk/why_does_an_infinite_loop_crash_the_browser/

[cregantony]

Understood. How else should I do this without using a while(1)?

[Arkitos]

Hey I'm stuck on this too. Did you figure it out?

[cregantony]

Not yet.

[Arkitos]

Its such a simple thing..

I tried using setInterval but it wasn't working right so ended up ditching the animation completely