Michał Moroz
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.
Douglas GmbH
Düsseldorf, Germany
Intermediate
Senior
TypeScript
React
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
01:32 MIN
Organizing a developer conference for 15,000 attendees
Cat Herding with Lions and Tigers - Christian Heilmann
04:49 MIN
Using content channels to build an event community
Cat Herding with Lions and Tigers - Christian Heilmann
03:17 MIN
Selecting strategic partners and essential event tools
Cat Herding with Lions and Tigers - Christian Heilmann
11:32 MIN
The industry's focus on frameworks over web fundamentals
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
02:44 MIN
Rapid-fire thoughts on the future of work
What 2025 Taught Us: A Year-End Special with Hung Lee
03:38 MIN
Balancing the trade-off between efficiency and resilience
What 2025 Taught Us: A Year-End Special with Hung Lee
04:57 MIN
Developing resilience by expanding your capacity for failure
What 2025 Taught Us: A Year-End Special with Hung Lee
03:39 MIN
Breaking down silos between HR, tech, and business
What 2025 Taught Us: A Year-End Special with Hung Lee
Featured Partners
Related Videos
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
23:39Rethinking React State Management: The Power of Built-In Solutions
Marc Brehmer
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
49:32Keith Cirkle of GitHub on React Fatigue
Keith Cirkle
26:00To New Frontiers: The Future of Frontend Development
Rainer Hahnekamp
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
54:44Under The Hood Of Vue 3 Reactivity
Marc Backes
46:24The Rise of Reactive Microservices
David Leitner
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Twin.Link GmbH
Osnabrück, Germany
Intermediate
Senior
React
TypeScript
Top web
Remote
£145-187K
Intermediate
React
JavaScript
TypeScript
Mindpeak
Hamburg, Germany
Intermediate
API
Linux
WebGL
React
Docker
+3