[FEATURE] : Performance Optimizations :: React Component Memoization and Lazy Loading

[YashGupt29]

Why do we need this improvement?

Summary

Several components in our tools dashboard and image display system are experiencing unnecessary re-renders and inefficient image loading, impacting application performance and user experience.

• Filter components (FiltersDropdown, FiltersDisplay, Filter) re-render frequently even when their props haven't changed
• Image components load eagerly by default, slowing initial page load
• Complex filtering logic in ToolsDashboard recalculates on every render
• Large lists and dropdowns rebuild their DOM elements unnecessarily
• Memory usage spikes during filter operations and list rendering

How will this change help?

Performance

• Reduced unnecessary component re-renders
• Faster initial page load times
• Lower memory usage during filtering operations
• Smoother user interaction with filters and dropdowns
• Improved code maintainability

Screenshots

No response

How could it be implemented/designed?

1. ToolsDashboard Component Optimizations

Event Handler Memoization

• Convert handleClickOutsideFilter to use useCallback:

  Current: function handleClickOutsideFilter(event)
  Change to: useCallback with [openFilter] dependency
  

• Convert handleClickOutsideCategory to use useCallback:

  Current: function handleClickOutsideCategory(event)
  Change to: useCallback with [openCategory] dependency
  

• Convert filtering functions to useCallback:

  - filterToolsByCategory: Add useCallback with empty dependency array
  - checkToolFilters: Add useCallback with [languages, technologies, searchName, isAsyncAPIOwner, isPaid]
  

Data Memoization

• Implement useMemo for toolsList computation:

  Current: Direct computation in component
  Change to: useMemo with [categories, checkToolFilters, filterToolsByCategory]
  

2. FiltersDropdown Component Optimizations

Event Handler Memoization

• Convert handleClickOption to useCallback:

  Current: function handleClickOption(option)
  Change to: useCallback with [checkedOptions, setCheckedOptions]
  

List Rendering Optimization

• Implement useMemo for dropdownItems:

  Current: Direct mapping of dataList
  Change to: useMemo with [dataList, checkedOptions, handleClickOption]
  

3. FiltersDisplay Component Optimizations

Event Handler Memoization

• Convert handleClickOption to useCallback:

  Current: function handleClickOption(option)
  Change to: useCallback with [checkedOptions, setCheckedOptions]
  

Display Items Memoization

• Implement useMemo for displayItems:

  Current: Direct mapping of checkedOptions
  Change to: useMemo with [checkedOptions, handleClickOption]
  

🚧 Breaking changes

Yes

👀 Have you checked for similar open issues?

• [x] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• [x] I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[RishuKumarCodes]

I can do this

[RishuKumarCodes]

starting to work

[YashGupt29]

already attached the PR!!

[anshgoyalevil]

You guys aren't waiting for the issue to be approved by maintainers? Please read the contributing guidelines.

[Devnil434]

Hi @YashGupt29 can I start working on this issue

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[ShreyasN707]

@YashGupt29 Hi! Can i work on this issue it fits my techstack.