Handling Race Conditions with Multiple Async Calls in React Using useEffect and useState
This might be a silly question, but I'm currently facing an issue where I have multiple asynchronous calls being made in a React component using `useEffect`, and I'm running into a race condition that leads to inconsistent state updates. Specifically, I have a `fetchData` function that fetches data from two different APIs, and I want to update my component state with the results of both calls. However, it seems like the second API call can sometimes complete before the first one, leading to `state` being overwritten unexpectedly. Here's a simplified version of my code: ```javascript import React, { useEffect, useState } from 'react'; const MyComponent = () => { const [data, setData] = useState({ data1: null, data2: null }); const fetchData = async () => { const response1 = await fetch('https://api.example.com/data1'); const result1 = await response1.json(); const response2 = await fetch('https://api.example.com/data2'); const result2 = await response2.json(); setData({ data1: result1, data2: result2 }); }; useEffect(() => { fetchData(); }, []); return ( <div> <h1>Data 1</h1> <pre>{JSON.stringify(data.data1, null, 2)}</pre> <h1>Data 2</h1> <pre>{JSON.stringify(data.data2, null, 2)}</pre> </div> ); }; export default MyComponent; ``` The problem arises because `setData` is being called after both API calls complete, but there's no guarantee of the order in which they complete. Sometimes, `data1` gets updated, but `data2` ends up being `null` if it completes first. I've thought about using `Promise.all` to handle both fetch calls concurrently, but I'm unsure if that will resolve the race condition properly or if it will introduce other issues. I've also considered using a separate state for each fetch, but that would lead to a more complex state management solution. Has anyone experienced something similar? What would be the best practice to ensure that both API calls complete and update the state correctly without introducing race conditions? This is part of a larger CLI tool I'm building. Could this be a known issue?