[BUG] Missing `requestAnimationFrame` Cancellation Causes Memory Leak

[Devnil434]

🐛 Describe the bug

The animation loop created using requestAnimationFrame in App.js is never cancelled when the component unmounts.

As a result, the RAF loop continues executing after unmount, while lenis.destroy() is called during cleanup. This can lead to runtime errors, unnecessary CPU usage, and memory leaks.

---

Location

• File: src/App.js
• Hook: useEffect

---

Steps to Reproduce

1. Run the application locally.
2. Trigger a component unmount (e.g., route change, hot reload, or conditional rendering).
3. Observe that the animation loop continues running after unmount.

---

Expected Behavior

• The requestAnimationFrame loop should be properly cancelled during the cleanup phase.
• No animation callbacks should execute after lenis.destroy().

---

Actual Behavior

• The RAF loop continues after component unmount.
• lenis.raf(time) may be invoked on a destroyed Lenis instance.
• This can cause:
  • Memory leaks
  • Console errors
  • Unstable behavior over time

---

Root Cause

The ID returned by requestAnimationFrame is not stored, and cancelAnimationFrame is never called in the useEffect cleanup function.

---

Proposed Fix

Store the RAF ID and cancel it during cleanup.

---

Impact

• Prevents memory leaks
• Avoids runtime errors after unmount
• Improves overall application stability and performance

---

Environment

• React
• Lenis
• Browser: All major browsers
• OS: Platform independent

---

Additional Notes

This issue becomes more impactful when using smooth-scrolling libraries like Lenis, as destroyed instances may still receive animation frame callbacks if not properly cancelled.

I am willing to submit a PR.

[Devnil434]

hello @M4dhav sir
please assign this issue to me

if it not already resolved

[M4dhav]

Could you share a sample of the issue in action?