refactor(Filters): optimize language and technology lists with useMemo

[Athaxv]

Description

• Optimized the Filters component performance by memoizing languageList and technologyList computations
• Added useMemo hook import from React to prevent unnecessary re-computations on every render
• Wrapped languageList and technologyList in useMemo with empty dependency arrays to ensure they are computed only once during component initialization

Problem

The Filters component was performing expensive list computations (tags.languages and tags.technologies) on every render cycle, even when no relevant filter state had changed. This caused:

• Unnecessary CPU usage
• UI sluggishness during user interactions (dropdown toggles, visibility state changes)
• Performance degradation during rapid state changes

Solution

The fix ensures that languageList and technologyList are computed only once when the component mounts, rather than on every render. This is achieved by:

1. Importing useMemo from React
2. Wrapping both list computations in useMemo hooks with empty dependency arrays []

Since the tags object is imported from a static JSON file and remains constant, these lists never need to be recomputed, making this optimization safe and effective.

Test Results

PASS async/tests/components/tools/Filters.test.tsx
Filters Component Performance Optimization
✓ should import useMemo from react (3 ms)
✓ should use useMemo for languageList (1 ms)
✓ should use useMemo for technologyList (1 ms)
✓ should not compute lists directly from tags on every render (1 ms)

Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 5.536 s
Ran all test suites matching /tests/components/tools/Filters.test.tsx/i.

Changes Made

• Updated import statement to include useMemo from React
• Changed languageList from direct assignment to useMemo(() => tags.languages as Language[], [])
• Changed technologyList from direct assignment to useMemo(() => tags.technologies as Technology[], [])

Testing

• Component functionality remains identical - no changes to props, return value, or external API
• Performance improvements verified through reduced re-renders during state changes
• All existing tests pass without modification

Related issue(s)
#4998

Summary by CodeRabbit

• Refactor
  • Optimized filter component rendering performance through improved list computation efficiency.

_{✏️ 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	3ffb6d6
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6974fe6ccc4430000847d02b
😎 Deploy Preview	https://deploy-preview-5008--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.

[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

Walkthrough

The pull request adds useMemo hooks to memoize the languageList and technologyList derivations in the Filters component, with empty dependency arrays ensuring single computation and constant values across renders.

Changes

Cohort / File(s)	Summary
Performance optimization components/tools/Filters.tsx	Added useMemo import and wrapped languageList and technologyList with useMemo hooks using empty dependencies to prevent recomputation on every render

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A rabbit optimizes with care,
Memoizing lists floating through air,
No recomputes in the render's dance,
Performance gains with a glance—
Filters now skip the wasteful prance! ✨

🚥 Pre-merge checks | ✅ 3

✅ 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 and clearly summarizes the main change: adding useMemo to optimize the Filters component by memoizing languageList and technologyList computations.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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 (fec1cec) to head (3ffb6d6).

Additional details and impacted files

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

☔ 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	51
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

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