Skip to content

Commit 178b68a

Browse files
tmikovclaude
andcommitted
Fix missing cleanup in BouncingBall animation effect
Add cancelAnimationFrame cleanup to useEffect to prevent the animation callback from running after the component unmounts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 8fdc000 commit 178b68a

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

examples/showcase/BouncingBall.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export function BouncingBall() {
2626
// Update ball position every animation frame
2727
useEffect(() => {
2828
let time = performance.now();
29+
let rafId;
2930
function render(t) {
3031
const dt = (t - time) / 10;
3132
time = t;
@@ -69,10 +70,11 @@ export function BouncingBall() {
6970
});
7071

7172
// Request next frame
72-
requestAnimationFrame(render);
73+
rafId = requestAnimationFrame(render);
7374
}
7475

75-
requestAnimationFrame(render);
76+
rafId = requestAnimationFrame(render);
77+
return () => cancelAnimationFrame(rafId);
7678
}, []);
7779

7880
return (

0 commit comments

Comments
 (0)