const log = [];
let data = null;
async function loadData() {
return Promise.resolve({ users: ['Alice', 'Bob'] });
}
// Bug: forgot to await — data is still null when we log
async function init() {
loadData().then(d => { data = d; }); // no await!
log.push('data: ' + (data ? data.users.length : 'null'));
}
init().then(() => console.log(log[0]));const log = [];
let data = null;
async function loadData() {
return Promise.resolve({ users: ['Alice', 'Bob'] });
}
// Fix: await the promise before using the data
async function init() {
data = await loadData(); // wait for data
log.push('data: ' + (data ? data.users.length : 'null'));
}
init().then(() => console.log(log[0]));Bug: loadData() is called but not awaited. The .then() handler runs asynchronously AFTER log.push. data is still null when we log.
Explanation: await loadData() pauses init() until the promise resolves. data is populated before the log.push executes.
Key Insight: Every async call in a useEffect that sets state needs await (or .then). Missing await = state set before data arrives = extra render with undefined/null.