Thursday, March 5, 2026

--- That's why moving to React Query is smart!

  Here's the hierarchy:


  ProfilePage (PARENT - stays mounted forever)

    └─ Changes which child shows based on activeTab:

        ├─ UserProfileTab (unmounts/remounts)

        ├─ PermissionTab (unmounts/remounts)

        └─ ReportingNetworkTab (unmounts/remounts)


  When you switch tabs:

  - ❌ ProfilePage = Stays mounted, never unmounts

  - ✅ Child tabs = Unmount when hidden, remount when shown again


  Since ProfilePage's useEffect on line 54 has [] (empty dependencies), it only runs on the initial mount - and since ProfilePage never unmounts, it never runs again.


  If you keep the profile query in ProfilePage (parent), it still won't refetch when switching tabs (same behavior). But React Query gives you:

  - ✅ Automatic caching (5 min staleTime)

  - ✅ Better error handling

  - ✅ Easy manual refetch if needed

  - ✅ Loading states handled automatically

No comments:

Post a Comment