Experiencing slow data fetching in react native with firebase: how to optimize performance

See more:

Javascript

react-native

I've built a small mobile app using React Native (Expo) with Firebase. The app allows users to view their portfolio, transactions, PNL, etc. However, I'm facing an issue where fetching data from the database is taking an excessive amount of time.

const Home = ({ navigation, route }) => {
  const userId = route.params?.userId;
  const [clientData, setClientData] = useState(null);
  const [latestAnnouncement, setLatestAnnouncement] = useState(null);

  useEffect(() => {
    if (!userId) {
      console.error("No user ID provided");
      return;
    }

    const fetchData = async () => {

    
      const startTimeClientData = Date.now();
      const clientRef = doc(FIRESTORE_DB, "clients", userId);
      const depositsRef = collection(clientRef, "deposits");
      const withdrawalsRef = collection(clientRef, "withdrawals");
      const dataPNLRef = query(collection(FIRESTORE_DB, "dataPNL"), orderBy("date", "desc"), limit(4));
    
      const [clientDoc, depositsSnapshot, withdrawalsSnapshot, dataPNLSnapshot] = await Promise.all([
        getDoc(clientRef),
        getDocs(depositsRef),
        getDocs(withdrawalsRef),
        getDocs(dataPNLRef),
      ]);
      console.log("Fetching client data:", Date.now() - startTimeClientData, "s");
    

      const dataPNL = dataPNLSnapshot.docs.map(doc => doc.data());
      const latestValue = dataPNL?.[0]?.value || 0;
      const initialDeposit = clientDoc.data().initialDeposit || 0;
      const totalDeposits = depositsSnapshot.docs.reduce((sum, doc) => sum + (doc.data().value || 0), 0);
      const totalWithdrawals = withdrawalsSnapshot.docs.reduce((sum, doc) => sum + (doc.data().value || 0), 0);
      let initialBalance = initialDeposit + totalDeposits - totalWithdrawals;
      if (totalDeposits === 0 && totalWithdrawals === 0) {
        initialBalance = initialDeposit;
      }
      const finalBalance = (Math.round(initialBalance * (1 + latestValue / 100) * 100) / 100).toFixed(2);
      const latestWithdrawal = withdrawalsSnapshot.docs[0]?.data()?.value || 0;
      const latestDeposit = depositsSnapshot.docs[0]?.data()?.value || 0;
      const monthlyPnL = dataPNL ? dataPNL.reduce((sum, data) => sum + (data?.value || 0), 0) : 0;

      setClientData({
        currentBalance: finalBalance,
        latestWithdrawal,
        latestDeposit,
        latestValue,
        monthlyPnL
      });
      const announcementsRef = collection(FIRESTORE_DB, "announcements");
      const latestAnnouncementRef = query(announcementsRef, orderBy("date", "desc"), limit(1));
      const latestAnnouncementSnapshot = await getDocs(latestAnnouncementRef);
    
      setLatestAnnouncement(latestAnnouncementSnapshot.docs[0]?.data());
    };

    fetchData();
  }, [userId]);

My observations:

The initial read takes around 7 seconds, while subsequent reads take 1-2 seconds

What I have tried:

Fetching them separately using multiple async functions takes even longer.
The time taken seems to be volatile and inconsistent.
Here's an example of the time logs:

LOG Fetching client data: 3030 ms
LOG Fetching deposits: 827 ms
LOG Fetching withdrawals: 2009 ms
LOG Fetching dataPNL: 1168 ms
LOG Fetching latest announcement: 158 ms
Fetching Client Data: The client data was retrieved from the collection containing information about individual clients.

Fetching Deposits: The deposits sub-collection, containing values and dates for each client, was fetched next.

Fetching Withdrawals: The withdrawal sub-collection was then fetched, containing the values and dates for each client's withdrawals.

Fetching DataPNL: The dataPNL collection, which includes weekly data on percentage and dates.
I have also tried adding indexing for the collections in the Firebase index option, but it didn't make a significant difference.