How JavaScript’s Single Thread Handles Async and What startTransition Changes

JavaScript single‑threaded execution model

JavaScript runs on a single call stack and a single heap. All synchronous code is executed sequentially on this stack, so only one piece of code runs at a time.

Asynchronous work with setTimeout

console.log('Javascript');
setTimeout(() => {
    console.log('Synchronous');
}, 1000);
console.log('is');

Output:

Javascript
is
undefined
Synchronous

The undefined appears because the callback passed to setTimeout is queued and executed only after the current call stack finishes. The timer does not block the stack; it schedules the callback for later.

Urgent vs. non‑urgent updates

In a typical search input the user expects:

Typed characters to appear immediately – an urgent update.

Search results to be fetched and rendered later – a non‑urgent update.

Because JavaScript is single‑threaded, a long‑running task blocks all other work until it completes, causing visible lag.

React 18 startTransition

React 18 introduces startTransition to let developers mark a piece of work as non‑urgent. Urgent updates (e.g., state that controls the UI immediately) are processed first; the transition callback runs only after all urgent work is finished.

setInputValue(value); // urgent: update input immediately
startTransition(() => {
    setSearchData(data); // non‑urgent: fetch and render results later
});

Difference from setTimeout

setTimeout

creates an asynchronous callback that runs after a timer expires, potentially reordering events. startTransition does not reorder events; it synchronously schedules the wrapped callback to run after the current urgent work, preserving the original order.

References

React 18 discussion: https://github.com/reactwg/react-18/discussions/41

Additional examples: https://github.com/reactwg/react-18/discussions/65