00:00 So, we were trying to fix it so that when you hit the corner, it doesn't have, it doesn't reset because we are not actually changing any of the vanilla tilt options when we change this state. So, there's no reason we need to re-initialize vanilla tilt, because none of the options changed anyway. That's what we're trying to do, and we did this with a use effect that passed a dependency

00:19 that includes all these options. The problem is that our options are something like this. It's this object, and here's the glare, here's the max, all of this information, and we pass that as a part of our dependency array. And then, we get another render, and we create a new options object.

00:37 So, now we've got the old options object, we've got the new options object, and even though they look exactly the same, when we are doing a triple equal or an object.is, which is the same thing, basically, as a triple equal, pretty much, but when you're doing that comparison, even though they look the same, they are not.

00:55 And so, React is doing exactly what it's been programmed to do. It's checking those vanilla tilt options and saying, hey, these things are actually different. These two objects, this is, they look, they have the same properties, but I'm not even checking those properties. I'm just saying, are these the exact same thing? And because they are not, because we're creating those vanilla tilt options in our function

01:14 component, they are different objects between renders, and that's why we're getting reset. So, even though the properties are all the same, because we're getting a re-render here, we're creating a new object, and it ends up resetting. This is a really important thing for you to understand as you're working with the use effect dependency arrays, and when we get into use memo, and use callback, and all the

01:33 dependency arrays that those involve as well. You need to understand the referential equality of these objects. So, if we had this as option one and option one, then this would be true, because they are exactly the same.

01:49 Or even if this was options one, then this would also, options two, there we go, this would also be true, because they're referenced really equally and have two variables pointing to the same thing. But just because they look the same, doesn't mean that they are.

02:06 And this is functionally correct, like it's technically the right thing, but it does kind of make things a little annoying. And so, typically what I like to try and do, is I like to take things down to the primitive level.

02:22 And so, instead of having, like slurping it all into objects, I just do every primitive that I'm depending on, and that ensures that if like true is equal to true, or 25 is equal to 25, it doesn't matter, there's no referential equality there, it's just like primitive values, are those things the same?

02:41 So that's what you're going to do to solve the problem where clicking on the corner to just increment the count, is actually visibly resetting this vanilla tilt experience. So you should be able to click on this corner, and it shouldn't move or jerk like that. That's what it will look like when you're done. So let's get primitive.