A light switch is 'off' but the bulb is 'on'. This talk explores how derived state prevents such contradictions and makes your application predictable.
#1about 2 minutes
Defining the core principle of reactive programming
Reactive libraries exist primarily to reduce the number of possible invalid states within a system.
#2about 4 minutes
Using derived state to eliminate invalid states
A lamp example demonstrates how derived state reduces four possible states, including two invalid ones, down to two valid states.
#3about 2 minutes
How popular JavaScript libraries implement reactivity
Frameworks like React, Vue, RxJS, and Solid all provide primitives for both mutable state and derived state.
#4about 1 minute
Tip 1: Transform imperative updates into derived state
Refactor imperative UI updates, such as setting a title, to be a derived state based on the application's core data.
#5about 4 minutes
Tip 2: Decouple state by keeping items independent
Avoid using multiple boolean flags for related UI visibility, as this creates coupled state and potential invalid combinations.
#6about 3 minutes
Tip 3: Place state in the component hierarchy
Decide whether to use global state for coupled features or local state for isolated components to manage complexity effectively.
#7about 8 minutes
A four-step process for refactoring reactive code
Follow a structured process of mapping function calls, reverse-mapping state, and incrementally creating derived state to untangle complex code.
#8about 3 minutes
The benefits of reducing invalid application states
Refactoring to a reactive model with derived state leads to clearer code boundaries, easier conceptualization, and a more predictable application.
Related jobs
Jobs that call for the skills explored in this talk.
Why Attend a Developer Event in 2026?Modern software engineering moves too fast for documentation alone. Attending a world-class developer event is about shifting from tactical execution to strategic leadership — and in 2026, the opportunity to do that on US soil has never been stronger...
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTMLInside last week’s Dev Digest 215 .
🗿 Make AI talk like a caveman
🧠 A guide to context engineering for LLMs
🤖 Simon Willison on agentic engineering
🔐 Axios supply chain attack post mortem
🛡️ Designing AI agents to resist prompt injection
🎨 HTML in c...
Chris Heilmann
Micro Components - a different approach to a simpler component-based webThere has been a lot of heated discussion lately in the web community about component based development. One side argued that Web Components are a standard we should follow whereas others complained that they still lag behind in what frameworks offer...
From learning to earning
Jobs that call for the skills explored in this talk.
30:40
25:41
49:32
23:39
26:00
49:00
54:44
46:24
