Problem:

– I have a state variable (Object) that I fill through 2 async functions.

– My useEffect() is called when this variable changes. This happens twice (as expected).

– But each time I assign a value to a key, the other key-value is empty!

…Why?

State variable called “pageData”:

interface DataState {
    marketData: any[]
    totalCash: number
}
const [pageData, setPageData] = useState<DataState>({
    marketData: [],
    totalCash: 0
});

There are 2 asyncronous functions loading data from the server:

setPageDataa({...pageDataa, totalCash: 821916.994425});

…and the other…

setPageDataa({...pageDataa, marketData: [{test: 1}, {test: 2}, {test: 3}]});

My useEffect event:

useEffect(() => {
    console.log('event useEffect pageData', pageData);
}, [pageData]);

…