Hint
Promise.all for parallel independent fetches in useEffect avoids multiple setState calls (and re-renders) per load. One await, all data, one state update.
const log = [];
async function fetchDashboard() {
log.push('fetching...');
const [user, posts, notifications] = await Promise.all([
Promise.resolve({ name: 'Alice' }),
Promise.resolve(['Post1', 'Post2']),
Promise.resolve(3),
]);
// Single state update after all data is ready
log.push(user: ${user.name});
log.push(posts: ${posts.length});
log.push(notifs: ${notifications});
log.push('setState called once');
}
fetchDashboard().then(() => console.log(log.join(' | ')));fetching... | user: Alice | posts: 2 | notifs: 3 | setState called once
Explanation: All three fetches run in parallel. When all resolve, setState is called once with all data. No intermediate loading states for each piece.
Key Insight: Promise.all for parallel independent fetches in useEffect avoids multiple setState calls (and re-renders) per load. One await, all data, one state update.