search

badhon252 / aconews

A responsive news app called ACONEWS. The app will fetch and display news from the GNews API (using the free tier). The project involves frontend design, backend integration, and deployment on Firebase.
0 stars 0 forks source link

Unhandled Runtime Error: Maximum update depth exceeded in Search Functionality #23

Closed badhon252 closed 5 days ago

badhon252 commented 5 days ago

The application is experiencing a "Maximum update depth exceeded" error in the search functionality. This error occurs when the user enters a search query in the SearchBar component. It is triggered by a recursive loop involving the setSearchQuery and setSearchResults functions in store/useNewsStore.ts.

Steps to Reproduce:

Expected Behavior:

The search functionality should filter the news articles based on the user's query and display the results in the SearchResultsModal component.

Possible Solutions:

Introduce a debounce mechanism to delay the search update and prevent the infinite loop. Memoize the search results to prevent unnecessary re-renders when the search query remains unchanged.

Additional Information:

The relevant code snippets are in store/useNewsStore.ts, hooks/useSearchNews.tsx, and components/Navbar/SearchBar.tsx.

badhon252 commented 5 days ago

Fix: Prevent infinite loop in search functionality

Implemented debounce mechanism in components/Navbar/SearchBar.tsx to delay search updates. Memoized search results in hooks/useSearchNews.tsx to optimize re-renders. Resolved "Maximum update depth exceeded" error.