Quadratic memory usage

[eugene-daragan-codex]

Version

2.5.4

Reproduction link

https://codepen.io/anon/pen/KyyxKB?editors=1010

Steps to reproduce

1. Open browser devtools
2. Launch reproduction with different MAX variable (100, 200, 500, 1000, 1500, 2000, 4000)
3. Note that memory usage growth quadratically with the MAX variable, while number of computed properties and their implied dependencies in the program is proportional to the MAX variable.

What is expected?

Expected linear (i.e. proportional) growth of memory consumption with growth of MAX variable

What is actually happening?

All data_X observables have all computed_X computed values as their subscribers, so total number of subscriptions growth quadratically.

---

It's quite hard to write a code that would really affect users with the bug, but anyway it feels like a flaw in reactive system design.

[HerringtonDarkholme]

After some investigation, I wonder if this usage worth a major redesign in reactive system.

Vue has two reactive components under hood, Watcher and Dep. They are quite like Output and Input: Watcher will execute callback when Dep changes. The problem is there is no such component acting like pipe: both executes callback and notifies watchers.

All observables have all computed values as their subscribers

This is how we mock pipe with only watcher and dep. To optimize memory usage, we probably need a new reactive component like Rx in https://github.com/lihaoyi/scala.rx .

However, that new class might only optimize limited usage. As OP has already stated:

It's quite hard to write a code that would really affect users with the bug