pmndrs / pmndrs/react-spring

[bug]: Tab crash with skipAnimation and loop

Open
#2,409 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: core kind: bug
Dominant language
TypeScript
Stars
29.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Which react-spring target are you using?
  • @react-spring/web
  • @react-spring/three
  • @react-spring/native
  • @react-spring/konva
  • @react-spring/zdog
What version of react-spring are you using?

10.0.3

What's Wrong?

When combining a SpringValue that has loop: true and Globals.assign({skipAnimation:true}), there is an infinite loop that crashes the tab.

When setting immediate: true, this infinite loop runs every frame (with the request animation frame loop).

To Reproduce

This minimal code is enough to lock the main thread at 100% usage.

import { Globals, SpringValue } from "@react-spring/web";

Globals.assign({ skipAnimation: true });

new SpringValue(0, {
  to: 1,
  loop: true,
});
Expected Behaviour

If we are setting skipAnimation or immediate, I think the loop parameter should be ignored to avoid this infinite loop.

Link to repo

https://codesandbox.io/p/sandbox/tender-scott-5k6l8w

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal @react-spring/web reproduction using SpringValue, loop: true, and Globals.assign({skipAnimation:true}); compare it with the immediate: true behavior described in the issue. Trace the loop and request-animation-frame handling, then verify that the reproduction no longer locks the main thread while skipAnimation or immediate behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.