While-loop causes browser crashes

[WhySoBad]

🐛 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-spring v9.0.0-beta.34 and v8.0.27
• react v16.12.0

[aleclarson]

Please try with v9.0.0-rc.2

#985

[WhySoBad]

Thanks for the quick answer.
I successfully installed this version but the site doesn't even render anything anymore. After a few seconds the site crashes.

[aleclarson]

Can you reliably reproduce this with a git repository? So I can take a look 👍

[sad-squid]

Tried this today with v9 rc3 and also experiencing the same locally using the same example as listed above - react-spring site example:

  const { radians } = useSpring({
    to: async (next) => {
      while (1) await next({ radians: 2 * Math.PI });
    },
    from: { radians: 0 },
    config: { delay: 500, duration: 3500 },
    reset: true,
  });

Chrome Version 81.0.4044.138 (Official Build) (64-bit)

Note: The tab does not die if the while loop is removed, so I'm guessing it has something to do with that. Upgrading to latest Chrome didn't seem to change anything.

EDIT: Was able to reproduce in v9.0.0 rc2 as well.
Temporarily working around with a downgrade to latest on v8. (and having to ignore TypeErrors 😢 )

[aleclarson]

That code is incorrect for v9. See its latest version here:
https://github.com/react-spring/react-spring-examples/blob/14b8219bd5e9280f29cd4624ffc60ebe97ec00b0/demos/hooks/blackflag/index.js#L11-L19

The infinite loop is triggered when the Promise returned by the next function is resolved immediately, which is what happens on every while tick. The Promise is resolved immediately each time, because its goal value { radians: 2 * Math.PI } is equal to the current value.

[aleclarson]

Even better than what I linked above: In v9, you can use the loop prop for less boilerplate:

  const props = useSpring({
    to: { radians: radians: 2 * Math.PI },
    from: { radians: 0 },
    loop: true,
    config: { duration: 3500 },
  })

[sad-squid]

Thanks for the clarification, this solved it! Appreciate the prompt response @aleclarson, I see I'm not the only one taking advantage of the day off 😄 !
I tried looking at the v9 changelog for potential breakage notes on this, is there a particular section that I missed from that?

[aleclarson]

The latest v9 docs are here: https://aleclarson.github.io/react-spring/v9/

Breaking changes have their own page: https://aleclarson.github.io/react-spring/v9/breaking-changes/