A live coding stream exploring how to migrate synchronous UI code to async in JavaScript frameworks. Starting with a simple synchronous divide example in React, the host walks through the challenges of adding async data fetching: race conditions, stale state, inconsistent UI, and loading indicators. The session covers naive approaches (separate useEffect per value), improvements via Promise.all, promise cancellation using refs and cleanup functions, and managing pending/loaded states. The broader context frames async handling across three generations of framework support: gen 0 (no async awareness), gen 1 (async primitives like React Query, createResource), and gen 2 (async-first like React 19, Svelte async, Solid 2.0). The core thesis is that ideally code shouldn't need to change when going from sync to async, and that async data should be treated as derived state rather than new write state.
Sort: