‫To finish this section, let's now revisit the topic
‫of stale closures so that we can dive a little bit deeper
‫into this important topic.
‫So when we first learned about use effect
‫maybe you have wondered why use effect actually
‫needs the dependency array
‫in order to know when it should execute the effect.
‫So why can't the effect not simply rerun automatically
‫whenever it should?
‫So to analyze this issue, we need to talk about closures.
‫So in JavaScript, a closure is basically the fact
‫that a function captures all the variables
‫from its Lexile scope.
‫So from the place that it was defined
‫at the time that the function was created.
‫So again, whenever a function is created, it closes
‫over the effect of that Lexile environment at the time.
‫And so it'll always have access to the variables
‫from the place where it was defined.
‫Now, in React hooks actually rely heavily
‫on this concept of JavaScript closures
‫and that is specially true for use effect.
‫So that's where we mostly see this happening.
‫And since this is such a great confusion
‫for many React developers, I wanted to take some time here
‫to now talk about closures and stale closures
‫in the use effect hook so that you understand even
‫better how all of this works.
‫So this is the type of advanced lecture that you probably
‫are not gonna find in most other React courses.
‫So let's just write a very simple effect here.
‫So just one more effect, and actually what we're doing now
‫is nothing new really.
‫All I'm gonna do is to summarize basically what
‫we have been seeing throughout this course until this point.
‫But anyway, in this function, all that I want to do
‫is to change the document title to a string
‫which contains the number of exercises.
‫So this title should be your, and then here the number
‫of workouts or of exercises in the workout.
‫So your, for example, five
‫exercise workout.
‫So let's give this a safe, and then indeed we
‫get your nine exercise workout, which is exactly
‫what we have here.
‫So as I mentioned at the beginning of this lecture
‫this function right here, so by the time
‫that this function was first created, it closed over the
‫variable environment that was present
‫at the time that dysfunction was created.
‫So that was in the initial render.
‫So a closure has been created here
‫at the time that this first render was created
‫and it closed over the props
‫and the state in the case of React.
‫And in React, we can actually also call this current state
‫and the current props a snapshot.
‫And so any function that was created at the initial render
‫and then not recreated, still has access
‫to that initial snapshot of state and props.
‫And so that's exactly what we have right here.
‫So dysfunction is created at the beginning
‫but then never again.
‫And so therefore here we now have a closure
‫with that initial snapshot and with the dependency array
‫that we have right now, which is basically here
‫the empty dependency array as this default,
‫dysfunction will actually never be recreated again.
‫And so it will never get access
‫to the current new snapshot, for example, as we change some
‫of these state variables, for example, this number here.
‫So if we change the number of exercises as we would expect
‫it did not change that up here in the title.
‫And in fact, we can prove that
‫\with any other state variable.
‫So for example, the duration state itself or these sets.
‫So if we change anything here now, then you see
‫that this log here happened once at the beginning.
‫But then as we keep changing these values
‫this effect will not be executed
‫and we don't get the fresh values inside dysfunction here.
‫So all of this is to say
‫that what was created here is what we call a stale closure.
‫So it's an outdated closure
‫because the function has captured the values
‫from a time where the number was still something else.
‫So where it was still nine.
‫Now, in the meantime here
‫it actually re-rendered because I changed some code.
‫But again, if I change this to something else
‫here it is still showing the outdated value.
‫So the value from the closure.
‫So essentially the effect function can not see all
‫of these variables here
‫unless we specify them in the dependency array.
‫And so let's now do that.
‫So let's specify at least the number variable right here.
‫And so basically specifying a dependency array is a bit
‫like telling the user facto something like, Hey
‫I know that you cannot see the current values
‫in the current render
‫but I promise that you only need to rerun this
‫effect whenever number here actually changes
‫and everything else does not matter to you, right?
‫And so if we change this now, let's say to nine
‫then React understands that this number state
‫here is actually important for this effect.
‫And so then it'll re-execute it, and by that time
‫the function can then close over.
‫So it can then capture the new snapshot.
‫So basically what the duration, the set and the number are
‫at the time that this dysfunction is executed again.
‫So let me now clear this here, and I will now
‫change the sets to five, enter duration 2, 1 20, let's say.
‫Then let's change that here.
‫And then we see that our effect is again,
‫referencing an old value.
‫So the duration here is still the duration from before.
‫And so again, this is here a stale value
‫now inside the stale closure.
‫So that's why we really need to define all
‫of these values in the dependency array.
‫So again, if we change this year to something
‫so right now the duration is 42.
‫And so now when we change the number of exercises
‫our effect function will capture the duration, the sets
‫and the number at this exact time.
‫So remember that is 42.
‫And so indeed now it again tells us that the duration is 42
‫even though it has already updated t 30.
‫And so we would of course then have to
‫update the duration here as well.
‫So adding it here,
‫and since we're here, let's add all of them
‫and so then it should really work.
‫So let's say now we are at 21
‫and if we change this now to 9,
‫then you see that it does get the newest value.
‫And so now the stale closure has completely been eliminated.
‫So at this point, our function here will always get access
‫to the latest snapshot that it is interested in.
‫Now, of course, if any of the other state variables out here
‫change so one that is not in the array,
‫then this function will still not get access to them.
‫But it also doesn't need to and it doesn't want to.
‫And so that's then not a stale closure.
‫So the stale closure only happens if dysfunction
‫is still referencing some old values that are outdated
‫by the time that dysfunction is running.
‫Okay? And so this is all that I had to show you
‫in this lecture, so was more talking than anything else
‫but that was also exactly my goal here.
‫So if you want, you can play around a bit more with this
‫maybe in this other effect or creating some more effects.
‫Cause this is really the most important thing
‫if you really want to nail this down.
‫Okay, let's just clean up the code here
‫before we finish this section completely.
‫Here we can just keep that.
‫And then let's also get our timer back.
‫So now that's updating right here every second again.
‫Okay, and that does it for this section.
‫Please make sure to review all the parts that you
‫found most confusing.
‫And then once you're done with that, once again
‫I meet you in yet another new section.
‫So hopefully I see you there very soon.