I am trying to execute a function to update a setState but it as well needs other state to load first.

```js
    const [chatsIds, setChatsIds] = useState([]);
    const [chats, setChats] = useState([]);

    useEffect(() => {
        getChatsIds();
    }, []);

    useEffect(() => {
        getChats();
    }, [chats]);

```

the "getChats" needs the value from "chatsIds" but when the screen is loaded the value isn't , only when i reload the app again it gets the value.

Here are the functions :

```js
    const getChatsIds = async () => {
        const ids = await getDoc(userRef, "chats");
        setChatsIds(ids);
    }

    const getChats = async () => {
        const chatsArr = [];

        chatsIds.forEach(async (id) => {
            const chat = await getDoc(doc(db, "Chats", id));
            chatsArr.push(chat);
            console.log(chatsArr);
        });

        setChats(chatsArr);
    }   

```

I've tried with the useEffect and useLayoutEffect hooks, with promises and async functions, but i haven't found what i'm doing wrong :(