Async JavaScript

Foundational

JavaScript is single-threaded but non-blocking. Think of it like a restaurant — one waiter, but the kitchen works in parallel.

💡 Understanding async patterns is essential for data fetching, useEffect cleanup, and preventing race conditions in React.

Event Loop

The call stack, Web APIs, callback queue, and the single-threaded event loop that orchestrates them all.

Callbacks to Promises

From callback hell to .then() chains. Plus Promise.all, Promise.race, and error handling.

Async / Await

Syntactic sugar over promises. Write async code that reads like synchronous code, with try/catch.

Async in React

Why useEffect can't be async, AbortController for cleanup, and how to prevent race conditions.

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Using async directly on useEffect callback

Marking the useEffect callback as async breaks cleanup

Don't do this

data-loader.tsx

// async callback returns a Promise, not a cleanup function
useEffect(async () => {
  const res = await fetch("/api/data");
  const data = await res.json();
  setData(data);
}, []);

useEffect expects its callback to return either undefined or a cleanup function. An async function always returns a Promise, so React can never call your cleanup function. Define an inner async function and call it immediately instead.

Race conditions from stale async responses

Fast typing fires multiple requests — the slowest one overwrites the latest

Don't do this

search.tsx

// No protection against out-of-order responses
useEffect(() => {
  async function search() {
    const results = await fetchResults(query);
    setResults(results); // might be from an older query!
  }
  search();
}, [query]);

When a user types rapidly, multiple requests fire. Responses can arrive out of order — if the oldest request finishes last, it overwrites the newest data. Use AbortController in the cleanup function to cancel stale requests when the query changes or the component unmounts.

Not handling promise rejections

Forgetting try/catch around await calls or .catch() on promise chains

Don't do this

data-loader.tsx

// If fetchData rejects, error is swallowed entirely
useEffect(() => {
  async function load() {
    const data = await fetchData(); // unhandled rejection!
    setData(data);
  }
  load();
}, []);

Forgetting try/catch around await calls means errors silently disappear, or cause UnhandledPromiseRejectionWarning. In React, an unhandled rejection leaves the component in a broken state with no error UI. Always wrap await in try/catch and set error state for the UI.

// No protection against out-of-order responses useEffect(() => { async function search() { const results = await fetchResults(query); setResults(results); // might be from an older query! } search(); }, [query]);

Async JavaScript

Common Mistakes

Async JavaScript

Common Mistakes