[ryansolid]

Or Vue either to be fair. Similar rules in the Vue's setup function. It's how reactivity works in JavaScript. Basically don't destructure or access values out of of primitives or JSX. That's basically the gotcha.

Unfortunately it's the price you pay for portability thus far. You can build your own language around this like Svelte but then composability is limited (need to rely on other mechanisms). You can make the updates coarser grained like React but then you need a different mechanism(like VDOM diffing) to apply updates granularly. I imagine this situation improves in the future but we haven't gotten there yet.

[coxmichael]

Out of interest, what language features do you see JavaScript needing to support these kinds of fine-grained reactive updates, and to allow destructuring?

I'd assume something like es6 proxies for primitive values would be needed, but that, nor built-in reactive primitives, are being discussed currently as far as I know.

Personally, I'd love to see reactive `[].map` equivalents (no need to use <For> components), but that's possible today with a reactive wrapper or (god forbid) patching the prototype.