Problem rendering flatlist data with api sauce

React Native
1

So i did purchase react native mosh course that teaches how to build the ‘Done with it’.so far everything is working fine. The only problem i keep encountering is rendering flatlist data using the api sauce hook that mosh did build in his course. When i reload expo the data doesn’t show yet when i hit save ‘cmd + s’ of my code the data get displayed successfully displayed. So i don’t understand why my data doesn’t get rendered when the component get mounted. At some point i had to skip the hook and use axios instead which was working fine. Can anyone please help me figure this problem out?
HERE’S A BREAKDOWN OF MY CODE AND PROBLEM.

const getFoldersApi = useApi(foldersApi.getFolders);
const [foldersList, setFoldersList] = useState([]);

            useEffect(() => {
                getFoldersApi.request();
                setFoldersList(getFoldersApi.data);
              }, []);


          <FlatList
            style={styles.folders}
            /// here reside the problem
            data={foldersList}
            keyExtractor={(folder) => folder.Guid}
            renderItem={({ item, index }) => (
              <Card
                title={item.Nom}
                image={folderIcon}
                index={index}
                folderType={item.TypeDossier}
                folderState={item.EtatDossier}
                depositDate={item.DatedepoDossier}
                shippingType={item.TypeManifeste}
                vendor={item.Fournisseur}
                onPress={() => navigation.navigate("Détails", item)}
              />
            )}
          />

as you can see , for the data to show i have to hit save button on my code to show. my api call is working fine, i receive the data without a problem.

here’s built hook by mosh

import { useState } from "react";

export default useApi = (apiFunc) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const request = async (...args) => {
    setLoading(true);
    const response = await apiFunc(...args);
    setLoading(false);

    if (!response.ok) return setError(true);

    setError(false);
    setData(response.data);
  };

  return { data, error, loading, request };
};
2

My guess is that you need to await the getFoldersApi.request() in your useEffect, otherwise the getFoldersApi.data is still an empty array when you setFoldersList. According to this article, it would look something like this:

useEffect(() => {
  const fetchData = async () => {
    await getFoldersApi.request();
    setFoldersList(getFoldersApi.data);
  }
  fetchData().catch(console.error);
}, []);