Hey!

I was wondering, what is the best way to handle lots of contexts that are also fetching different data?
Right now, I have multiple contexts & hooks, each fetching some data.

I find myself having to do the following check in every component that uses any of the data:

  const { user, loading: loadingUser } = useAuth();
  const { clients, loading: loadingClients } = useClients()
  const { users, loading: loadingUsers } = useUsers();
  const { serviceCalls, dataServiceCalls, loading: loadingServiceCalls } = useServiceCalls();

  // Listen for changes in the needed data
  useEffect(() => {
    ...
  }, [clients, loadingClients, users, loadingUsers, serviceCalls, dataServiceCalls, loadingServiceCalls]);
  
  ...

  if(loadingClients || loadingUsers || loadingServiceCalls || !user) {
    return <LoadingScreen />
  }

Is this indeed the best way to handle multiple contexts or is there something else that's better to do?

Thanks!