> Markdown version of [/videos/1034-bringing-back-reactivity-in-reactive-frontend?t=32](https://www.wearedevelopers.com/videos/1034-bringing-back-reactivity-in-reactive-frontend?t=32). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Bringing back reactivity in "reactive" frontend

Are isolated boolean flags causing elusive bugs in your codebase? True reactivity exists to mathematically eliminate invalid states. Learn to build resilient frontends using pure derived primitives.

- **Speakers:** [Michał Moroz](https://www.wearedevelopers.com/@michal-moroz)
- **Event:** World Congress 2024
- **Published:** August 20, 2024
- **Duration:** 28:43
- **URL:** https://www.wearedevelopers.com/videos/1034-bringing-back-reactivity-in-reactive-frontend

## Summary

The true purpose of reactivity in frontend development extends far beyond simply keeping UI components in sync; its core defining principle is that reactive libraries exist to explicitly reduce the number of possible invalid states within a system. By moving away from imperative paradigms where changes are manually intertwined within monolithic update functions, developers can leverage frameworks like React, Vue, RxJS, and Solid to introduce derived state primitives. When base state items are unnecessarily split or manually mutated—such as tracking interface panel visibility with multiple isolated boolean flags—applications inevitably drift into mathematically invalid combinations that trigger elusive bugs. Refactoring such entangled, error-prone code relies on making state items fundamentally independent and converting redundant state into pure derived state that evaluates without side effects. To systematically reclaim reactivity in a messy legacy codebase, developers must first map out all tangled recursive function calls, isolating the precise read and write locations of specific state items. From there, engineers can incrementally replace each disjointed piece of state with a newly derived alternative, selectively positioning it higher or lower within the component hierarchy based on rigid business coupling constraints. Ultimately, prioritizing pure derived functions eliminates unpredictable side effects, making modern javascript applications remarkably predictable and resilient for clients.

**Keywords:** reactive programming, frontend reactivity, derived state patterns, invalid state reduction, javascript state management, imperative vs reactive paradigm, react refactoring techniques, vue computed properties, rxjs observables, solidjs signals, pure function implementation, ui state synchronization, legacy codebase refactoring, component hierarchy state, side effect elimination, predictable application architecture

## Chapters

1. **Establishing a practical definition of reactivity** (00:32) — Finding a shared principle of reactive programming that focuses on preventing impossible application states.
1. **Modeling object-oriented states versus derived reactive states** (02:35) — A simple lamp switch example illustrates how derived states eliminate invalid combinations of data.
1. **Comparing derived state primitives across modern JavaScript libraries** (07:16) — How react, vue, rxjs, and solid each handle base state declarations and derived computations.
1. **Replacing explicit state mutations with derived variables** (08:09) — Translating convoluted imperative update functions into clean reactive computed values to fix unpredictable behavior.
1. **Decoupling UI states to prevent impossible interface combinations** (10:31) — Organizing finite sets of independent state paths avoids conflicting interface visibility bugs.
1. **Positioning derived state logic within component hierarchies** (13:59) — Evaluating the tradeoffs between placing derived state in global stores versus isolating it within local child components.
1. **A systematic process for refactoring legacy imperative updates** (17:13) — Recursively mapping out function dependencies and state mutations enables a safe transition to derived pure functions.
1. **The architectural benefits of reducing invalid states** (25:39) — Relying on derived state and pure functions yields a more predictable, conceptualized, and resilient frontend architecture.

## Related Moments

- [Defining true reactivity in web frameworks](https://www.wearedevelopers.com/videos/684-angular-signals-what-s-all-the-fuss-about) (from "Angular Signals: what's all the fuss about?")
- [Introduction to react components, props, and state](https://www.wearedevelopers.com/videos/653-how-to-become-an-ai-toolsmith) (from "How to become an AI toolsmith")
- [Navigating the learning curve of reactive programming](https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs) (from "Practice makes perfect - when it comes to RxJS")
- [Summarizing modern patterns for robust interactive components](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")
- [The complexity and maintainability tradeoffs of reactive programming](https://www.wearedevelopers.com/videos/843-java-21-the-revolution-of-virtual-threads-a-deep-dive) (from "Java 21: The Revolution of Virtual Threads - A Deep Dive")
- [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo")

## Related Articles

- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer, React (Bitpanda Broker)](https://www.wearedevelopers.com/jobs/ext/1444421-software-engineer-react-bitpanda-broker) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**