Michał Moroz

Bringing back reactivity in "reactive" frontend

A light switch is 'off' but the bulb is 'on'. This talk explores how derived state prevents such contradictions and makes your application predictable.

Bringing back reactivity in "reactive" frontend
#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.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Featured Partners

Related Videos

See all videos
What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Side-by-Side: Reactive vs non-reactive Java25:41

Side-by-Side: Reactive vs non-reactive Java

Jan Weinschenker

Keith Cirkle of GitHub on React Fatigue49:32

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

Rethinking React State Management: The Power of Built-In Solutions23:39

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

To New Frontiers: The Future of Frontend Development26:00

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

The Rise of Reactive Microservices46:24

The Rise of Reactive Microservices

David Leitner

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 203: Play 90s Games, Don't Return to Office & Manage Agents
Inside last week’s Dev Digest 203 . 👔 AI coding agents need managers 📲 Running Claude Code on your phone ⚠️ How secure is vibe code? 🤔 Can we fix web dependencies? 🕸️ Search the human web 💻 Copy website designs with one click 🕹️ Play all your favour...
Dev Digest 203: Play 90s Games, Don't Return to Office & Manage Agents
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.