Angular Core

Angular Core Shared Mutable State Problem


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Shared Mutable State Problem" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates what a visual example of shared mutable state looks like, then explains why it's an important concept to understand and prevent.

Get Unlimited Access Now

Transcript from the "Shared Mutable State Problem" Lesson

>> Speaker 1: Look what happens when I start mutating this.
>> Speaker 1: Everywhere.
>> Speaker 1: And so I'll go ahead and save this. Notice here, good. But it was that leaky mutation that sets the stage for component of an architecture, and how you kind of deal with that particular issue? But then how you start to structure your applications at scale.

[00:00:45] Yes?
>> Speaker 2: Sorry, I just did not see that. What mutation were we observing on there?
>> Speaker 1: All right, so don't blink.
>> Speaker 2: Again, I'm not sure where to be looking.
>> Speaker 1: On the left.
>> Speaker 2: They all say-
>> Speaker 1: So I'm mutating the form, so I'm changing the data structure.

>> Speaker 2: You just don't want that to be represented in the final saved.
>> Speaker 1: Well, so if I change it here, not only do I not want it, you may not realize it but you definitely don't want it. You don't want to change something in one place and have it change in the title And down here in the projects list.

[00:01:25] And so this is a very obvious example, but this happens all the time in applications where you have shared, mutable state, where you have, for instance, an object in a service. You're passing by reference across two components and one component is like, this can never go up to past ten.

[00:01:48] And the other component's like, I'm a rock star, I'm gonna turn this to 11. And all of a sudden, boom, you've got a problem. Or you're expecting something to be in a certain state, but something over here, because the right hand doesn't know what the left hand is doing, then you get into an unpredictable state.

[00:02:08] Because somewhere somebody else has done something that you weren't aware of. And so this is, I think, a very, okay, to my seven-year-old son, Dad, what's state mutation or shared mutable state? I'm like, well, let me show you. We come here and I'll be like, see,
>> Speaker 1: And I type it here, you see how it's here and here.

[00:02:27] So very simple, but don't be like, it's kind of a simple example, but it's indicative of something. It appears benign but it's not at all. It's very, very dangerous in your application when you have state that can be mutated in more than one place.