Refactor: Implement Centralized Data Fetching Strategy with React Query

[rishabh0510rishabh]

2. Problem Statement

The current application architecture relies heavily on scattered useEffect hooks and local state management for data fetching. This approach introduces several issues, including race conditions, "waterfall" request patterns, and difficulty in managing global server state. As the application grows, maintaining consistency across Profile, Events, and community features is becoming increasingly complex and error-prone.

3. Current Behavior / Limitation

• Redundant Fetching: Data is re-fetched every time a component mounts, even if the data hasn't changed, leading to unnecessary network overhead.
• Manual State Management: Loading (isLoading) and error (isError) states are manually toggled in multiple components, leading to boilerplate code.
• No Caching: There is no mechanism to store previously fetched data; navigating away from the Events page and back triggers a full reload.
• Race Conditions: Rapid navigation can result in state updates on unmounted components or outdated data overwriting newer data.
• Files Affected: Logic is currently hardcoded in src/pages/Profile.jsx, src/pages/Events.jsx, and encapsulated in a basic custom hook at src/hooks/useFetch.js.

4. Expected Improvement

Migrating to TanStack Query (React Query) will provide:

• Robust Caching: Instant load times for previously visited pages.
• Automatic Re-validation: Data stays fresh in the background (stale-while-revalidate).
• Simplified Codebase: Removal of complex useEffect and useState boilerplate in favor of declarative hooks.
• Deduplication: Multiple components requesting the same data will only trigger a single network request.

5. Proposed Approach

1. Installation: Install @tanstack/react-query and (optional but recommended) @tanstack/react-query-devtools.
2. Global Setup: Initialize the QueryClient and wrap the application with QueryClientProvider in src/App.jsx.
3. Create Query Hooks: Create a new folder (e.g., src/hooks/queries/) or refactor src/hooks/useFetch.js to export specific query hooks (e.g., useUserProfile, useEventsList, useCommunityData).
   • These hooks should utilize the useQuery hook.
4. Refactor Components:
   • Update src/pages/Profile.jsx to use the new profile query hook.
   • Update src/pages/Events.jsx to use the new events query hook.
5. Cleanup: Remove the legacy manual fetching logic from the components.

6. Verification Steps

To verify that the refactor is successful and working as intended:

1. Network Optimization Check:
   • Open Chrome DevTools -> Network tab.
   • Navigate to the Events page. Observe the API call.
   • Navigate to Home, then immediately back to Events.
   • Pass: You should not see a loading spinner, and the data should appear instantly (served from cache). Depending on staleTime config, you may see a background refetch in the Network tab, but the UI should be responsive immediately.
2. Offline Capability:
   • Load the Profile page.
   • In DevTools -> Network, set "Throttling" to Offline.
   • Navigate away and back to the Profile page.
   • Pass: The data should still display correctly using the cached version.
3. Refocus Refetch:
   • Open the app in two tabs.
   • Change data in one tab (if mutation logic exists) or simply focus the second tab.
   • Pass: React Query should automatically trigger a background refetch on window focus (default behavior).

Labels: ECWoC26

[rishabh0510rishabh]

hey @TiwariDivya25
I’d like to work on this. Please assign it to me if possible.