fix: prevent memory leak by fixing useEffect dependencies

[Sam-61s]

Description

Fixes a memory leak caused by useEffect hooks running on every render and re-registering mousedown event listeners.

Changes made

• Added [openFilter] dependency to the first useEffect so the listener updates only when openFilter changes
• Added [openCategory] dependency to the second useEffect so the listener updates only when openCategory changes

Result

• Event listeners are registered only when necessary
• Proper cleanup on dependency change and unmount
• Prevents accumulating listeners and potential memory leaks

Related issue(s)

Fixes #4846

Summary by CodeRabbit

• Bug Fixes
  • Enhanced filter and category responsiveness to ensure proper state synchronization during user interactions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	db22886
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/695aaae18ffa97000873c6de
😎 Deploy Preview	https://deploy-preview-4860--asyncapi-website.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]

📝 Walkthrough

Walkthrough

Added dependency arrays to two useEffect hooks in ToolsDashboard.tsx—one depending on openFilter and the other on openCategory—to prevent event listeners from being re-registered on every render, fixing the memory leak caused by repeated attachment and cleanup cycles.

Changes

Cohort / File(s)	Summary
useEffect dependency arrays components/tools/ToolsDashboard.tsx	Added dependency arrays to two useEffect hooks: first hook now tracks openFilter state; second hook now tracks openCategory state. Prevents mousedown event listeners from re-registering on every render.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 Listeners were dancing with every breath,
Attaching and detaching, quite the mess,
But now with dependencies, they know their place,
They'll only wake when the state runs its race,
Memory leaks fixed—our code's now spry! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: fixing useEffect dependencies to prevent memory leaks in event listener registration.
Linked Issues check	✅ Passed	The pull request fully addresses all coding objectives from issue #4846: adding dependency arrays to useEffect hooks to prevent event listener re-registration on every render.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the memory leak in ToolsDashboard.tsx by updating useEffect dependencies, with no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8cd3cd7 and 741b37a.

📒 Files selected for processing (1)

• components/tools/ToolsDashboard.tsx

🧰 Additional context used

🧠 Learnings (4)

📓 Common learnings

Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:43.887Z
Learning: In the Filter component (components/navigation/Filter.tsx), the useEffect hooks are intentionally designed to react only to route/URL changes, not to prop changes (data, checks, onFilter). The omitted dependencies are by design.

Learnt from: amanbhoria
Repo: asyncapi/website PR: 3373
File: components/AlgoliaSearch.tsx:313-313
Timestamp: 2024-11-11T21:30:32.478Z
Learning: In the `SearchButton` component within `components/AlgoliaSearch.tsx`, if the component re-renders on every button click and the `useEffect` runs accordingly, adding dependencies to the dependency array might not be necessary.

📚 Learning: 2025-12-29T14:21:43.887Z

Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:43.887Z
Learning: In the Filter component (components/navigation/Filter.tsx), the useEffect hooks are intentionally designed to react only to route/URL changes, not to prop changes (data, checks, onFilter). The omitted dependencies are by design.

Applied to files:

• components/tools/ToolsDashboard.tsx

📚 Learning: 2024-11-11T21:30:32.478Z

Learnt from: amanbhoria
Repo: asyncapi/website PR: 3373
File: components/AlgoliaSearch.tsx:313-313
Timestamp: 2024-11-11T21:30:32.478Z
Learning: In the `SearchButton` component within `components/AlgoliaSearch.tsx`, if the component re-renders on every button click and the `useEffect` runs accordingly, adding dependencies to the dependency array might not be necessary.

Applied to files:

• components/tools/ToolsDashboard.tsx

📚 Learning: 2025-12-29T14:21:28.216Z

Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.

Applied to files:

• components/tools/ToolsDashboard.tsx

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Redirect rules - asyncapi-website
• GitHub Check: Header rules - asyncapi-website
• GitHub Check: Test NodeJS PR - windows-latest
• GitHub Check: Lighthouse CI

🔇 Additional comments (2)

components/tools/ToolsDashboard.tsx (2)

35-47: LGTM! Memory leak fix correctly implemented.

The [openFilter] dependency array ensures the effect re-runs only when openFilter changes, preventing listener accumulation on every render. The listener closure now stays fresh with the current state value, and cleanup properly removes old listeners before adding new ones.

---

50-62: LGTM! Memory leak fix correctly implemented.

The [openCategory] dependency array ensures the effect re-runs only when openCategory changes, preventing listener accumulation on every render. The listener closure now stays fresh with the current state value, and cleanup properly removes old listeners before adding new ones.

---

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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (2747eba) to head (db22886).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4860   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          798       798           
  Branches       146       146           
=========================================
  Hits           798       798           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	36
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4860--asyncapi-website.netlify.app/