‫In this video, let's change the page title
‫in the browser to the movie that we are currently watching.
‫So to show you, let's, again, come to our demo here.
‫And so watch what happens here to the browser tab title
‫as I click on one of the movies.
‫So you see that now, the title of the page is equal
‫to the movie that we are currently checking out.
‫And if I then click on another one,
‫then, of course, that changes to the new movie.
‫All right, and so let's do the same thing
‫in our application as well.
‫Now, to start, as we see, the initial title
‫of the page is actually usePopcorn.
‫So the name of the application and not just React app.
‫So let's come into our public folder and in index.html,
‫let's just change the title here to usePopcorn,
‫give it a save, and then immediately, it changed up here.
‫Okay, but anyway, let's now actually try
‫to implement changing the title
‫to the currently watched movie.
‫So how are we going to do that?
‫Well, changing the page title in the browser,
‫so outside here of the application, is a side effect
‫because we are very clearly going
‫to interact with the outside world,
‫so basically with the world outside
‫of our React application.
‫And so again, this is then considered a side effect.
‫So what this means is that we will want
‫to register a side effect using, again, the useEffect hook.
‫Now, where exactly are we going to do that?
‫So in which component are we going to use useEffect,
‫or in other words, in which component
‫do we actually want to register the side effect?
‫Well, thinking about it, we want this title here to change
‫as soon as we click on one of these movies,
‫which will then trigger the movie details component here
‫to mount, and so it's in exactly that situation
‫where we want to change the browser title here.
‫And so that component is where we want that effect.
‫So let's come to movie detail.
‫And yeah, so this is the component.
‫And so let's simply add another effect here.
‫So we should always use different effects
‫for different things.
‫So basically, that each effect has only one purpose,
‫so it only does one thing.
‫So this will be our effect,
‫and then we want to run that effect on mount.
‫Okay, and now it's very easy.
‫So we can just change the title of the page in the browser
‫by setting document.title.
‫And for now, let's just use something else here.
‫And you see that actually, it already changed
‫to TEST right here, but let's just reload.
‫And so then it goes back to usePopcorn
‫and then when I click, it changed to TEST.
‫Nice.
‫So that's already working, but of course,
‫we now want the actual title there.
‫So let's use a template literal
‫and then I will just write Movie
‫and then the actual title of the movie.
‫Give it a save and immediately,
‫we get Inception here and here in the title.
‫But again, let's just reload.
‫And you see that now, it actually says undefined.
‫So why is that? That looks very weird, right?
‫But let's think about it because after we do that,
‫it will actually make sense.
‫So our effect here will right now only be executed
‫as the component first mounts, right?
‫Now, at that point, so when the component first mounts,
‫what is the title going to be?
‫And remember how actually, we already inspected
‫that earlier, but let's just do that again.
‫So logging to the console, here, we notice,
‫well, actually, we don't notice anything,
‫so let's just reload, then clear this, then click.
‫And so you see that initially, the title is undefined,
‫which is because in the beginning,
‫this movie object is still empty,
‫and only after the movie actually arrives
‫from the API, the component will re-render
‫and then we have the correct title
‫that is then logged to the console.
‫So moving back to our effect, basically, what happens here
‫is that again, in the beginning, the title is undefined.
‫And so since this effect only runs exactly once,
‫when the component mounts,
‫it will just stay undefined forever.
‫So when the component re-renders
‫with the correct movie object and the correct title,
‫our effect will right now not react to that.
‫So it will not be re-executed.
‫Now, luckily for us, we already know how to fix that, right?
‫So we just have to include this title variable here
‫in the dependency array.
‫And so then, if we give it a save,
‫then you see that it actually changed to the correct title.
‫Let's just try that again.
‫So first, we get undefined and then we get Inception
‫which, again, is because now, our effect
‫is basically listening for this variable to change.
‫And when it does change, then our effect is executed again.
‫Now, there's just one problem,
‫which is that we actually don't want
‫to see the undefined here in the beginning.
‫So we don't want temporarily to be our movie set
‫to undefined, but we can simply fix that by writing,
‫if there is no title, then just return.
‫So try that again and yeah, that's fixed now.
‫Now, also because we did this here,
‫so we specified the title, we can now move to another movie,
‫and it will then automatically change the title up here
‫which, if we hadn't done this,
‫this actually wouldn't happen.
‫So let's just remove it just so I can show you.
‫And...
‫Well, now, actually, we never see anything
‫because we have this early return here.
‫So let's try that again.
‫Okay, and now again, as I click another one,
‫we see that the title stays at undefined.
‫So this component here has re-rendered
‫and so the title has changed, but of course,
‫our effect did not react to that.
‫And again, that's because we are missing
‫this critical dependency in the dependency array.
‫But now with this, it does actually work.
‫Great, there's just one final problem,
‫which is that, when we go back, then you see
‫that the movie actually stays here in the title.
‫So let's do another one, then, of course, it is correct.
‫But again, if we go back, then the title will stay here.
‫So it will not go back to just usePopcorn
‫as we would probably want.
‫So it doesn't make any sense that now here,
‫we still have the Inception movie
‫while we are no longer seeing that movie.
‫So how could we change that?
‫I mean, nowhere in our code we are actually telling React
‫to go back to the usePopcorn title, right?
‫And right now, we actually don't know how to do that yet
‫because for that, we will first need to learn
‫about the concept of cleaning up.
‫And so let's do that right in the next lecture.