-
- Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
🐛 Bug Report
At the react-spring website https://www.react-spring.io/ one of the examples for useSpring() is this codesandbox https://codesandbox.io/embed/8ypj5vq6m9. This code sandbox works perfectly in the sandbox but in a real project it causes browser tab crashes. I copyed the code and changed it to my use and the browser tab always crashes due to the while(1) loop. This issue is similar to #591 which should be fixed since April 2019. I tried with the 9.0.0 beta too but nothing changed. I also tested with different browsers (Chrome, Microsoft Edge Canary, Internet Explorer, Microsoft Edge) but at every browser the site crashed.
To Reproduce
This is my code:
const HeaderLogo = props => { //While testing sineHeight was 2 and waveDuration 3000 const { sineHeight, waveDuration, className, ...rest } = props; const additionalParam_b = 10; //Only useful for multi objects const additionalParam_d = 1.7; //Only useful for multi objects const interp = i => r => { return `translate3d(0, ${ sineHeight * Math.sin(r + (i * additionalParam_b * Math.PI) / additionalParam_d) }px, 0)`; }; const { radians } = useSpring({ to: async next => { while (1) await next({ radians: 2 * Math.PI }); }, from: { radians: 0 }, config: { duration: waveDuration }, reset: true, }); return ( <animated.div className={cx(className, style.header_logo)} style={{ transform: radians.interpolate(interp(0)) }} > <HeaderButton {...rest} /> </animated.div> ); };Expected behavior
The while loop executes too fast what causes a browser tab crash.
Link to repro (highly encouraged)
https://codesandbox.io/embed/8ypj5vq6m9 (Example from https://www.react-spring.io/docs/hooks/use-spring which even causes crashes on this website)
Environment
react-springv9.0.0-beta.34 and v8.0.27reactv16.12.0