Current section: DOM Side-Effects 29 exercises
Problem

Dependencies

Loading exercise

Transcript

00:00 Our users want to be able to control the tilt capabilities here. So if we wanted to slow it down, now it's a little slower. It's kind of interesting or increase the glare, max glare or max, whatever max means. This is crazy. No glare at all. Oh man.

00:17 So we have the power. That's what our users wanted. So Kelly put this together so that these options are defined or generic or provided by the users. The problem is that you might notice when we click this corner, the vanilla tilt is getting reset. And we actually noticed that.

00:39 Remember in the last section, the last step, you saw a cleanup and then reinitialization every time we rerender. So anytime we make a state change that triggers this to rerender, we're going to get this being reset, which is not exactly optimal. It's not problematic really,

00:58 but it does have an impact on the user experience. And so we would like to not have that problem. I'd like to be able to click this corner and have it stay the corner rather than having it reset my vanilla tilt all the time. And so for that reason we can't solve this with the ref callback.

01:14 We have to switch to use effect and we need to provide some dependencies for use effect so that we know when we should clean up and reinitialize. So like when these options change, we need to throw away the old stuff and set up the new stuff. We can't vanilla tilt doesn't have an API for updating the the configuration

01:35 options. So we've got to remove the old stuff, reinitialize with the new options. And so that is what our dependency will be. Now we'll stick the options in the dependency array and then we'll initialize here. We'll clean up here. So we're just mostly moving things over to a use effect and adding some

01:53 dependencies. The problem is what we're going to discover is that just doing this alone is not going to solve that problem, but it gets us closer to the solution and we'll talk about why this doesn't quite solve the problem for us yet. So when you're all done, you will click on this corner like this and it will still reset and you'll be like, wait, what's going on? We'll talk about that. But for now,

02:14 I just want you to take the stuff that we have in the ref, move it into a use effect so that we can improve this experience a bit. See you in a sec.