‫So with our knowledge
‫about the cleanup function, we can now very easily
‫solve the problem that we still have with our page title.
‫So remember that we need a cleanup function.
‫Whenever the side effect that we introduced
‫in the effect keeps happening after the component
‫has already been unmounted.
‫And so that is actually exactly our case here.
‫So indeed, we no longer have the inception movie here
‫but the side effect is still happening.
‫So the title is still showing that old movie
‫that we had selected before.
‫And so the cleanup function is of course
‫the perfect solution for this case.
‫So a cleanup function,
‫remember is simply a function that we return from an effect.
‫And so let's specify a function here
‫and then return it from the effect function.
‫And here all we want to do is to basically reset
‫the document.title to its original form.
‫So that's usePopcorn, and this is all we have to do.
‫So let's reload.
‫Let's select our movie,
‫then indeed we get a title but as we go back,
‫or title also goes back to usePopcorn.
‫Great, and so this is actually all the code
‫that we have to write to solve this problem.
‫But let's just do a quick experiment
‫just so I can show you something.
‫So let's look to the console here.
‫Also in this situation,
‫clean up effect for movie and then the title.
‫And here we keep getting these random errors
‫which is because one of these images here cannot be found.
‫So that's a bit annoying, but let's just ignore that.
‫So let's reload, clear the console here,
‫then select one of the movies
‫and now as I go back we already know that this function here
‫will get executed.
‫And so again that's because this component here
‫will be unmounted and so that's when the cleanup function
‫of the effect will get executed.
‫So our title will change.
‫And let's see what is locked to the console.
‫So we get cleanup effect for movie "Inception."
‫Now, it might seem obvious that we get the name here
‫but if we think about it,
‫it actually might seem a bit strange, right?
‫Because as we learned in the previous lecture
‫this cleanup function here will actually run
‫after the component has already unmounted.
‫And so if that's the case then how will the function
‫actually remember this title here?
‫So again, this function here runs only after the component
‫has already disappeared from our componentry
‫and so all the state including the movie object
‫has been destroyed.
‫But still our function here remembers the title.
‫So how is that?
‫Well, it's because of a very important concept
‫in JavaScript called a closure.
‫So basically a closure in JavaScript
‫means that a function will always remember all the variables
‫that were present at the time
‫and the place data function was created.
‫So in the case of our cleanup function here,
‫it was created by the time this effect
‫first was created here.
‫And so by that time the title
‫was actually defined as "Inception."
‫So in this case, the movie that we were seeing before.
‫So it was "Inception" at the time this function was created.
‫And so therefore we say that dysfunction closed
‫over the title variable
‫and will therefore remember it in the future.
‫So in this case, even after the component
‫has already unmounted, okay.
‫So that was just a bit of a theoretical explanation
‫of what happens behind the scenes.
‫But I think it's pretty important to understand this idea
‫of closures because it is really a crucial part
‫of how effects work in React,
‫and therefore we will actually
‫also come back to this issue a bit later.
‫But anyway, I also want to show you
‫that the cleanup function runs between renderers.
‫So basically after each we render.
‫So if we click here, on some movie
‫and then we click on another one
‫let's say this one here,
‫then you see that the cleanup function
‫actually run again for this movie.
‫And so that happened right after the re-render, right?
‫Let's just clean this to watch that again.
‫So as I click here, there will be a re-render
‫and so again, then the previous effect was cleaned up
‫with the previous movie that we had selected before.