Intermediate Vue

State Management Q&A

Ben Hong
Pandan Studio
Intermediate Vue

Lesson Description

The "State Management Q&A" Lesson is part of the full, Intermediate Vue course featured in this preview video. Here's what you'd learn in this lesson:

Ben explains that Vue’s proxy-based reactivity system updates state efficiently, avoiding issues common in React. He mentions Vue Vapor for virtual DOM-free rendering and notes how modern frameworks are converging around reactivity and memoized computed properties.

Preview
Close

Transcript from the "State Management Q&A" Lesson

[00:00:00]
>> Speaker 1: Will subscribers to the store be re rendered.
>> Ben Hong: If you compose stores together?
>> Speaker 1: Yeah, I'm thinking it was a minute ago they asked it, so it must have been during the.
>> Ben Hong: Yeah, okay, so I'll answer that because I think that's an interesting question in itself then if they clarify otherwise.

[00:00:22]
So this is one thing I do think VUE does really well because of the way the reactivity. Reactivity system is written with proxies. Vue very rarely, to be honest, React deals with this a lot, which is like you have some state derived from this other state and because this state updates, it triggers the rerender on this other state.

[00:00:42]
And so, it's like performance thing that they frequently have to deal with. But to be honest, for those of us that use vue, that's actually very honestly, I don't ever think it's an issue just because. Again, because VUE understands that, yes, you're composing your stores together, they're dependent on each other, but if it's not in a context where rendering is necessary.

[00:01:06]
Unless you're triggering an update that goes up that way intentionally, you're really just calling a value to derive another value they're usually very good about. And so that's one of the things that, if you haven't heard about VUE Vapor, this is a big thing that's coming to like, basically we're going to be able to render your project without the virtual dom.

[00:01:33]
And the performance boosts on this are supposed to be quite promising, benchmark wise, because the whole idea is that you're supposed to be able to differentiate when a value actually is going to touch a template like the tree versus just a value that's in some sort of dependency tree.

[00:01:53]
I know Evan and the team have done a lot of granular work to figure out ways to really make sure that you don't get random triggering of re rendering and that kind of thing. So again, for those who want to be very forward facing and keep up to date with the laser and graders, definitely follow VUE Vapor to find what everyone's doing.

[00:02:13]
It's pretty cool. Is that what the audience member was asking about?
>> Speaker 1: That's exactly what they were asking. And they said they face this a lot in React.
>> Ben Hong: [LAUGH] Yeah, it's unfortunate, [LAUGH]. Yeah, one of the things that we see a lot of frameworks doing these days is honestly, if you've looked at angular, solid, svelte, it does seem like a lot of the modern frameworks are starting to converge in terms of the ideas, and they seem to agree in terms of reactivity principles.

[00:02:47]
Angular jumped on board with this too. So if Angular Solid Vue, I think Svelte's on here too, I think all four are on board with Signals. So that's basically an agreed reactivity approach. And then there is this general sense that computed, which is a derived part of state that has built in memoization and then optimizations in it is a key part, because as developers, that's what we're doing half the time.

[00:03:09]
We have a single source of truth. We derive stuff. We derive stuff. We derive stuff. We don't really want to have to deal with the memoization and the caching that deals in that we have other things to worry about. And so, I think if you're looking at the proposals on the web or TC39 and stuff, there's a native Signals proposal, but then within the individual frameworks, I think Angular right now is calling it Link Signals, I think Solid did too.

[00:03:31]
But it's really cool to see a lot of these frameworks starting to centralize and kind of agree on what is the best practice for the web. So that is super exciting.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Start a 5-Day Free Trial