Reactive state tracking in JS frontend frameworks is just ridiculous

This is a language that encourages you to create huge trees of objects but from what I can tell most frameworks have real trouble detecting any change more complex than a direct assignment

Am I missing something? I have a reactive list of objects of which fields get updated. I have no idea how to make that trigger UI updates.... This is just torture

Sad that this is every other reaction from the "this is something new, I refuse to try to understand" devs/people...

Yes, js has its limitations, but you wouldn't track every prop on every deeply nested object in any language unless completely necessary. There are ways to have the reactivity trigger, usually by replacing the object completely. But impossible to say without knowing exactly what you're doing with what framework.

@ScriptCoded How is this sad and how am I a bad dev because of it? I had a bad experience from dumb APIs

I'm not here to shit on js (i actually like js now) but wtf

"just recreate the entire object" okay sure, is there an easy way to do that? Not that I know. Apart from the fact that incrementing a single number now turned into "just deep copy an entire object tree"

@12bitfloat Never said you were a bad dev, never would.

Usually you can just spread. So something like this

x = {
...x,
y: x.y + 1
}

@ScriptCoded That doesn't do a deep copy though

I guess my problem is somewhat atypical because I'm trying to update a field of an object in an reactive array from an event listener (which doesn't know which entry in the array is "me")

I don't know. Maybe I should just finally switch to react, but it still doesn't feel right. Surely there has to be a better answer than "deep copy your entire application state" from an architectural perspective

If you really, REALLY need to track changes in deeply nested objects, look into proxies. You can recursively create proxy trees.

It's shit, really inefficient, but if you really gotta "deeply" track an object, yeah.

But if you're at this point, you may wanna rethink your architecture.

In a non garbage language you'd simply use value types :)

Last I use raw JS was in the HTML-CSS days n avoided reactivity by design, all AJAX n URL redirections post submission

Now though, Vue3 + TS works flawlessly for me
Every changable thing is inside a ref, theres watchers for derived stuff

n if a ref changes, UI auto updates!
Coz i skimmed through so idk if u answered but arent u using a framework that has such reactivity built in?

You can also do it with a reducer that assembles your global application state from its parts.

If you know how to certain structures work, you can make performing shit in any language.

I think you just have to make some more references or duplicate things even if convenient.

If software just was using some winner design pattern we would have a job. Everyone would do it.

Totally random shit. React is bad, just do native js, really. JS is an amazing language. Snek also didn't do React shit and you know the performance of that. #vroem, live type chat for everyone.

I'm so sure that React will cause you more time than native js as a beginner. Also I do not recommend Vue even. Nothing beats plain is. Those frameworks were all from a time that js was less great and they actually had a use case. My source of more than decade ago while js is officially didn't had classes was literally better OO than the React shit.

Btw, I really hope that you find out it's bullshit before you master React and end up with stockholm syndrome because you wasted much time on it like rust :p

@12bitfloat you are not really deep-copying anything iirc. You do from the programmer pov, but in memory things are handled smartly.

I don't understand what the problem is. You have an object change you're trying to react to, but it doesn't trigger the change? Sounds like an issue with your algorithm.