Current section: useEffect 16 exercises
solution

Implementing the Dependency Array

Transcript

00:00 let's start out by updating our types so we're going to add a depths which is optional and it can be an array of anything and our previous steps also optional can be an array of anything and then we're going to take optional depths

00:16 as an argument an array of anything and we're going to add our depths now the previous steps is going to be a little bit tricky though I think even our copilot our AI assistant is going to just say oh the previous steps is just the depths but that's not at all correct the previous steps needs to be

00:34 the previous effect depths so before we assign the effects at ID to this new object we need to access the dependencies from that previous version of that effects storage there so we get that previous steps and we stick that in

00:53 there we can also do it this way because of the way JavaScript works and I'm going to just do that okay so with that now we have access to that we now support this API so we can get rid of that and now we just need to make sure we only call the callback if it has no dependencies or the dependencies changed

01:10 so let's do that our has depth's changed is effect depth's so if if there are dependencies then we're going to perform this calculation otherwise we'll just say that the dependencies changed so here's the calculation this works out

01:27 nicely I think in my solution we do every every one of them must be equal so we'll do that so let's read it if there are dependencies then go through every one of them take that dependency and its index and we'll compare that dependency

01:43 against the previous dependencies with at that index if any of those things are not equal then we'll say that the dependencies have changed now interestingly object is is what's used inside of the react implementation it

02:01 does behave basically the same as a triple equal with a couple slight differences that you can feel free to look up later so if we say if has depth's changed then we'll call the callback and now when I am clicking this it is

02:17 absolutely calling every time so we have some sort of problem here that we'll have to debug let's see the depth is every one of those oh right we need to negate that there we go so we want to say every one of them has to be the same

02:37 and if that's not the case then the depth's changed there we go all right boom now we're not logging every time but as I didn't enable and disable then we log because that dependency is changing so that's exactly what we were

02:49 looking for awesome work so just to wrap this up the only difference was updating our types so that we have dependencies and previous dependencies then we updated our implementation to access the dependencies and also the previous

03:08 dependencies and then inside of our implementation here we just determined did those dependencies change and if they did then we will call the callback and if we want to double check we can also get rid of the dependencies here to make sure we didn't break the previous behavior and we did not so we're in a

03:24 good spot good job