fix: resolve react-hooks/exhaustive-deps warnings across components (#4617)

[dhiraj-143r]

This PR fixes all react-hooks/exhaustive-deps warnings reported in issue #4617.

What was done

• Added missing dependencies to useEffect, useMemo, and useCallback
• Removed unnecessary dependencies
• Wrapped functions with useCallback where needed
• Updated ref-based effects to avoid invalid dependencies
• Added SSR-safe checks for window usage
• Added intentional eslint-disable for mount-only scroll logic
• Replaced deprecated DocSearch internal types with valid ones
• Ensured npm run lint passes with no warnings

Files updated

• components/AlgoliaSearch.tsx
• components/campaigns/AnnouncementHero.tsx
• components/dashboard/table/Filters.tsx
• components/navigation/DocsNav.tsx
• components/navigation/Filter.tsx
• components/tools/ToolsCard.tsx
• components/tools/ToolsDashboard.tsx

Verification

• npm run lint → no warnings
• Functionality tested manually
• Confirmed no regressions or infinite re-renders

This PR resolves issue #4617.

Summary by CodeRabbit

• Bug Fixes

  • Search button now responds to changes in button content and action key.

• Refactor

  • Updated import paths to use public module entries for type exports.

[netlify]

❌ Deploy Preview for asyncapi-website failed.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5b49f96
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/691c12b6abaf2a000870db8f

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[coderabbitai]

Walkthrough

Updates React Hook dependencies and import paths in two components. AlgoliaSearch switches from internal type import path to public module entry and adds children and actionKey to useEffect dependencies. ToolsDashboard adds an ESLint suppression comment for the exhaustive-deps rule.

Changes

Cohort / File(s)	Summary
Type imports and dependency array updates components/AlgoliaSearch.tsx	Changed type import path from @docsearch/react/dist/esm/types to @docsearch/react public module entry; updated SearchButton's useEffect dependency array from empty to [children, actionKey] to trigger re-subscription on prop changes
ESLint configuration components/tools/ToolsDashboard.tsx	Added ESLint suppression comment (eslint-disable-next-line react-hooks/exhaustive-deps) above useEffect and formatting adjustment; no functional logic changes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Minor import path consolidation with no behavioral implications
• Dependency array fix addresses linting concerns with clear intent
• ESLint suppression properly documented
• Changes are localized and straightforward

Possibly related issues

• [BUG] React Hook dependency warnings in multiple components #4617: Directly addresses React Hook dependency issues in the exact components mentioned (AlgoliaSearch dependency array and ToolsDashboard exhaustive-deps handling)

Possibly related PRs

• docs: remove glee folder and update introduction-to-glee-a-spec-first-framework.md #4358: Modifies type imports in components/AlgoliaSearch.tsx from internal to public module entry
• fix: remove hydration errors #3262: Updates components/AlgoliaSearch.tsx SearchButton's useEffect and dependency handling with children prop logic

Suggested labels

ready-to-merge

Suggested reviewers

• derberg
• akshatnema
• sambhavgupta0705
• anshgoyalevil
• Mayaleeeee
• devilkiller-ag
• asyncapi-bot-eve

Poem

🐰 With imports so public and deps now so clear,
The hooks align perfectly, no warnings we fear!
From private to public, from empty to filled,
The linter's appeased and the warnings are stilled! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective of the PR: fixing react-hooks/exhaustive-deps warnings across multiple components, which aligns with the changes shown in the summaries.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 47a9d92 and 5b49f96.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• components/AlgoliaSearch.tsx (2 hunks)
• components/tools/ToolsDashboard.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

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: 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/AlgoliaSearch.tsx

📚 Learning: 2024-10-11T10:46:58.882Z

Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.

Applied to files:

• components/AlgoliaSearch.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). (1)

• GitHub Check: Lighthouse CI

🔇 Additional comments (2)

components/tools/ToolsDashboard.tsx (1)

153-167: Appropriate use of eslint-disable for mount-only effect.

The eslint-disable comment correctly suppresses the exhaustive-deps warning. Adding toolsList to the dependency array would cause the effect to re-run on every filter change, repeatedly scrolling to the hash—which is not the intended behavior. This effect should only run once on mount to handle initial URL navigation.

components/AlgoliaSearch.tsx (1)

3-3: Good change to use public API instead of internal path.

Importing from the public module entry (@docsearch/react) rather than the internal path (@docsearch/react/dist/esm/types) makes the code more robust and less likely to break with library updates.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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