Where to fetch and store global data (user, venue, socket) in React [closed]

In large applications we need global data, which means some data needs to be fetched first/globally,

• For example user data needs to be used in whole app
• Current selected venue data needs to be used in whole app
• Notifications socket needs to get notification without navigating to the notification page

Where should i call the api and set data in state

My approach for now:

• For getting user data: I create a hook with zustand user state and call user api in useEffect and use that hook in App.tsx root

• For getting venue data: Same i create hook , use zustand for venue state or also may be react query (if i'm not using zustand) and use that hook in root App.tsx like this:

  useCustomerData()  
  useVenueData() 
  

So is this valid? Or there is better approach? Because i'm confused whether to use in context, but if something in context renders it renders whole those states as well. or i can use hook like this too.