search

swapnilsparsh / DevEmpire

All in one place where you can find all the resources and details of ambassador/ fellowship, open-source events, web dev sites, games and etc. that are available across different sites.
https://devempire.netlify.app
127 stars 131 forks source link

Site Optimized #340

Closed Kushagra102 closed 1 year ago

Kushagra102 commented 1 year ago

Description

Fixes #272

  1. Reduced re-renders: In the old code, both the filterOptions and displayCards were recalculated on every render, regardless of whether their dependencies had changed. In the new code, these calculations are triggered only when the dependencies (searchTerm, pageNumber, filteredPageNumber) change. This optimization reduces unnecessary calculations and re-renders, leading to better performance.

  2. Improved filtering logic: The filtering logic in the new code is simplified and more efficient. Instead of combining the head and about properties into a single string and using includes(), the new code directly checks if the search term is included in the head or about properties of each data item. This avoids unnecessary string concatenation and improves filtering performance.

  3. Minimal state updates: The new code minimizes state updates by updating the filterOptions and displayCards only when necessary. It avoids updating the state when the search term is empty and the filter options remain the same.

  4. Consolidated useEffect hooks: The new code consolidates the two separate useEffect hooks into one. This consolidation reduces the number of effect callbacks and simplifies the code structure, leading to better maintainability.

  5. Simplified highlight search term: The new code simplifies the logic for highlighting the search term by using a regex replacement. It avoids unnecessary function invocations and string manipulations, resulting in improved performance.

Overall, these optimizations aim to reduce unnecessary calculations, minimize state updates, simplify logic, and improve the overall performance of the component.

Checklist

netlify[bot] commented 1 year ago

Deploy Preview for devempire ready!

Name Link
Latest commit 4ec9b846775997ea8cb3339ecb7b0d9fc7107453
Latest deploy log https://app.netlify.com/sites/devempire/deploys/64a56f225c3d9d00081755b5
Deploy Preview https://deploy-preview-340--devempire.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Kushagra102 commented 1 year ago

@swapnilsparsh please review this pr.