Fix debounce memory leak

[Aryan0819]

Related Issue

• Closes: Unmounted Hook State Memory Leaks #473

---

Description

🧱 The Architectural Context:
React components execute updates dynamically based on continuous state adjustments. If an asynchronous micro-task (like a network fetch or a setTimeout clock) finishes processing after its parent component has already unmounted from the DOM, triggering a state setter function causes a severe memory leak warning in the browser console.

❌ The Failure Mechanism:
The original useDebounce hook initialized a setTimeout scheduler every time a character was typed into a search input. If a user typed a character and immediately clicked a navigation link to change pages before the delay timer finished, the component tree unmounted, but the background browser timer remained active in the event loop. Once the timer completed, it attempted to call setDebouncedValue(value).

💥 The Impact:
This triggered the classic React runtime warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak. In larger applications, thousands of these uncleaned micro-tasks degrade client-side performance, exhaust system memory, and cause sluggish UI responses.

✅ The Solution:
Integrated a persistent tracking reference pointer using useRef(true) alongside an explicit cleanup routine. This ensures that the component safely clears any remaining background timer threads via clearTimeout and flags the tracking node as false the exact millisecond the component unmounts, preventing unmounted state state adjustments entirely.

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	0fa4b26
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a1309ea85be2a0008302bae
😎 Deploy Preview	https://deploy-preview-488--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Review limit reached

@Aryan0819, we couldn't start this review because you've used your available PR reviews for now.

Your plan currently allows 1 review/hour. Refill in 28 minutes and 19 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ac42eed6-fcbf-4f9c-af90-7ec284db7d91

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and 0fa4b26.

📒 Files selected for processing (2)

• backend/config/passportConfig.js
• backend/models/User.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #488 has been merged! 🎉🎉