[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!