Skip to content

fix(FallingText): stop the update loop on cleanup - #1082

Open
noron12234 wants to merge 1 commit into
DavidHDev:mainfrom
noron12234:feat/falling-text-cleanup
Open

noron12234 wants to merge 1 commit into
DavidHDev:mainfrom
noron12234:feat/falling-text-cleanup

Conversation

@noron12234

Copy link
Copy Markdown
Contributor

Changing a running FallingText's gravity recreates its effect, but the old updateLoop continues to schedule requestAnimationFrame callbacks. Unmounting stops Matter's runner and renderer while leaving that separate loop updating the old word elements and cleared engine.

This captures the latest frame ID and cancels it before the existing teardown, across all four JS/TS and CSS/Tailwind variants.

Reproduction in Chrome with a small Vite harness importing the actual component files: wrap requestAnimationFrame/cancelAnimationFrame to count pending callbacks named updateLoop; render FallingText with trigger="auto"; change gravity from 1 to 1.2 to 0.8, allowing effects to run between renders; unmount and observe for another 150 ms. Repeat for each variant, with and without React StrictMode.

Before: pending updateLoop callbacks grow from 1 to 2 to 3, and all three remain after unmount. Each case still executes 21 to 30 callbacks during the subsequent 150 ms observation.
After: pending callbacks stay at 1 across prop changes, become 0 on unmount, and no further updateLoop callback executes.

Validation:

  • All eight browser cases pass in desktop Chrome and a 390 x 844 viewport.
  • No captured runtime errors in the harness.
  • ESLint passes for both JS variants; Prettier passes for all four variants.
  • Targeted TypeScript check passes for both TS variants with target ES2020, DOM/DOM.Iterable, react-jsx, node module resolution, esModuleInterop, and skipLibCheck.

The browser harness is local verification, not a new project test dependency. This is scoped to the component's separate animation loop; it does not change physics timing or other resource ownership. Developed with Codex assistance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant