Breaking while loop crashes tab

[MM263]

My Specs

Bug reproduced on MacOS 10.14.3, Chrome 72.0.3626.12, Latest Safari
Latest [email protected]

---

Expected Behaviour

Making endless animation when using while loop shouldn't crash the browser tab.

Works perfectly in CodeSandbox.

---

What happened instead?

Following this example I tried implementing animation that is playing non-stop when while loop is set to true. I discovered that breaking that while loop crashes browser tabs (Safari, Chrome) both in dev environment and with minified build (Terser). Here is repro repository with the same component as in CodeSandbox.

Also, I found that leaving react-spring docs open for an extended amount of time also crashes the tab, but I can't reproduce it reliably.

---

Possible leads

1. The fact that it works in CodeSandbox makes me think that it is could be related to build tools, but I can't imagine how.

2. I think that there is a possibility that I should somehow cancel an animation with the second cancel argument in async "to", but there are no examples in the docs. If the problem lies in me misunderstanding how async "to" works, maybe we could add this use case to the docs.

3. Also, using set and stop functions with custom loop using setInterval might help, but I couldn't get them to work as of now, I'm going to try and update later.

4. Heavy inline SVG animation crashes Chrome tab sometimes. This is, I think, mostly not applicable in our case because the same crash happens even if you animate divs. However, people could repro the same behaviour with SVG relatively recently.

[subhero24]

I have the same issue. This code crashes the browser (chrome and safari):

useSpring({
	from: { transform: 'rotate(0deg)' },
	to: async next => {
		while (1) {
			await next({ transform: 'rotate(720deg)' });
			await next({ transform: 'rotate(0deg)' });
		}
	},
});

It completes the first iteration of the while loop normally, and then hangs the browser.
I could also not replicate this in a CodeSandbox. So maybe two different instances of react-spring in one build might be the issue ...?

[MM263]

@subhero24 I'm glad to know I'm not only one who has the problem.

I am not entirely sure what you mean by "two different instances", but in my repro repo there is only one useSpring in the whole app, so that shouldn't be the case

[subhero24]

@MM263 I'm using a dependency that also has a react-spring dependency. So I think the build would contain two versions of react-spring. I'm not convinced this is the issue, but I mentioned it just in case.
As you pointed to build tools, I am using parcel for the build.

[MM263]

@subhero24 Got it, thanks for clarification!

I'm using webpack by the way, so maybe we ruled out build tools :)

[aleclarson]

Cannot reproduce with https://codesandbox.io/s/v6o7666onl

LMK if you can break that, or provide a repository that I can run locally 👍

[subhero24]

I wanted to dig deeper into the issue just now. But I can not reproduce the issue anymore. Sadly, I have no idea what fixed it ...

[subhero24]

I was finally able to reproduce the bug! Here is a codesandbox that reproduces the issue: https://codesandbox.io/s/l4wqoyox5l

A one-time setState causes react-spring to go into an infinite loop. If you disable the line setState (index.js:24) inside useEffect, the tab crashes.

I disabled the sandbox "Infinite Loop Protection" in sandbox.config.json to show the issue of the infinite loop.

[aleclarson]

This seems to be fixed in #632 👍

[aleclarson]

You can use v9 like this now: yarn add react-spring@next

Let us know how it goes: #642

[subhero24]

Tried the 9.0.0 beta today, and it fixes the issue for me. Thank you!

[Code47X]

Just ran into this issue. v9.0.0 fixed it for me as well. Thanks! 🎉