Restore Original Values on Refocus and Unmount

[00:00 - 00:11] So far, we've mostly ignored what happens when focus is restored to the web page using our hook. The same is true for the case if used please stay is unmounted for some reason.

[00:12 - 00:25] And for both cases, whatever iteration or current state of the document title or the fav icon would remain that way stuck on the page. This isn't exactly a good developer experience.

[00:26 - 00:38] In Remedy of this problem, we can store the original values of both the title and fav icon in refs via the use ref hook. When focus is restored to the page or use please stay unmounts, we can restore those original values.

[00:39 - 00:51] This ensures a complete leave no trace lifecycle. These changes will make it easy to mount and unmount our hook as needed without any additional coding effort from the developers using our hook.

[00:52 - 01:03] The first thing we'll need to do concerns the refocus case. We'll need to forward the should always play value into both the use title change and use fav icon change effect functions.

[01:04 - 01:20] So I'll add those here and here. Let's first tackle the modifications needed in use title change effect.

[01:21 - 01:45] So here I need to add the should always play, which we know is a boolean, and we'll introduce a new ref which we will call original title ref. Using the use ref hook and that will be document.title.

[01:46 - 02:13] To handle the unmount case, we can add a new use effect. And we want in our cleanup function to restore the document title to our original title ref.current.

[02:14 - 02:26] To handle the refocusing case, we need to reset the title only when should always play is true. We can add this here to our use effect where we run the title logic.

[02:27 - 02:57] So the first thing we'll do is if the should iterate titles is false and should always play is false, then we know we can restore the document title to the original title ref.current. And we need to modify when the switch case is run with another if statement, which will be the logical opposite of this statement.

[02:58 - 03:23] So should iterate titles or should always play, then we would call our switch function. And of course, since we're using now should iterate titles and should always play, we need to add them to the dependency array of this use effect function hook.

[03:24 - 03:34] We can clean up our custom hook here. And that should be all we need to do within use title change effect.

[03:35 - 03:47] Let's now hop into use fav icon change effect and make the modifications there. So we need to accept this should always play parameter, which is a Boolean.

[03:48 - 04:03] And just like we saw in use title change effect, we'll introduce a new ref here . And we don't need the entire HTML link element, but we just want the href property of the original.

[04:04 - 04:15] And that's the value we'll use to restore on the case of on mount or refocusing . So I'm going to call this original fav icon href.

[04:16 - 04:29] And we'll use the use ref hook. And as the initial value here, we can take this fav icon ref.current and being careful to use the optional chaining.

[04:30 - 04:41] We will take the href value. So we know here in our get fav icon function that we don't necessarily return a HTML link element.

[04:42 - 04:52] If we don't find any, we return no. So that's why we'll use this optional chaining here because this current value may be no, and we won't have an href value.

[04:53 - 05:01] The unmount case is quite similar to what we saw in use title change effect. We can write a new use effect function here.

[05:02 - 05:07] And we want that to only fire on the unmount. So I'll pass an empty dependency array.

[05:08 - 05:29] And with the cleanup function, we'll first check if both the fav icon ref and the original fav icon href have a value. And we know if that's the case, then we can set the fav icon ref.

[05:30 - 05:42] Current href to the original fav icon href.current value. For the refocusing case, we can refactor this use effect.

[05:43 - 06:05] And what we'll do is if the should iterate fav icons is not true and should always play. It's also not true and we have both our fav icon ref current value and also the original fav icon ref current value.

[06:06 - 06:24] Then we know just like in our unmount function that we can restore the href value. And now since we're using both should iterate fav icons and should always play, we should add those values to our dependency array.

[06:25 - 06:44] And we can reformat this use fav icon change effect hook, save it, and we should be all set. So we can build our hook and within our app.tsx, let's create a nice simple example to test all this restoring functionality.

[06:45 - 07:05] What I think makes sense is a animation type of just looping. And here I've got some fav icon links. I'll just paste them in so I don't have to type them out.

[07:06 - 07:24] But what I've got here is a new line icon and also a Redux icon. So these should toggle between new line with the new line fav icon and the Redux fav icon, which is just the Redux logo.

[07:25 - 07:33] So let's fire up our app here. And we have our defaults here, the react logo and react app.

[07:34 - 07:57] These are what we expect to be restored. And of course, when we lose focus, we 're toggling between Redux and new line. The fav icon is also changing and we hope that when we go back to focus here, we should see that react app and react icon, which is exactly what happens. So just to double check if we go from the new line, we do see that restored.

[07:58 - 08:08] And if we go from the Redux setup, we also see the defaults restored. So it looks like handling the refocus case is working well.

[08:09 - 08:27] Now to ensure that we don't accidentally restore defaults when shit always plays true, let's explicitly set shit always play to be true. And we should expect that regardless of if we lose focus or not, we should always see these pairs together.

[08:28 - 08:50] In summary, we forwarded should always play on to use title change effect and use fav icon change effect. Within use title change effect, we added a new use effect, specifically an un mount use effect hook, which restores the document title to the original document title.

[08:51 - 09:08] We also modified this use effect function in that we check if should iterate titles as false and should always play as false, then we also restore the document title. In use fav icon change effect, we run similar logic in the unmount use effect.

[09:09 - 09:20] If we see that we have both a current fav icon and the original, then we restore that original. And in the main use effect logic, we also do the same as we saw in the titles.

[09:21 - 09:39] If should iterate fav icons as false and should always play as false and we have a value for both of the refs, then we do the same and we restore the original. So we're all done cleaning up and making this hook an absolute joy to use.

[09:40 - 09:43] In the next lesson, we'll publish the hook to NPM.