So far, you might have noticed that what happens when focus is restored to the web page using your hook has been mostly ignored. The same is true for the case if 

 is unmounted for some reason. For both cases, whatever iteration or current state of the 

 or the favicon were set at would remain that way for the page. This isn't a good developer experience. To remedy this problem, you can store the original values of both the 

 when the hook is used. When focus is restored to the page or 

 unmounts, you can restore those original values. This ensures a complete "leave no trace" life cycle. These changes will make it easy to mount and unmount your hook as needed without any extra coding effort from you as the developer using the hook.

// Modifies the document.title of the page when shouldIterateTitles is true
useTitleChangeEffect(
  titles,
  shouldIterateTitles,
  animationType,
  interval,
  shouldAlwaysPlay
);

// Modifies the favicon of the page when shouldIterateTitles is true
useFaviconChangeEffect(
  faviconLinks,
  shouldIterateTitles,
  interval,
  shouldAlwaysPlay
);

 to restore the original values when the component unmounts or focus is regained. Before anything, add the new 

export const useTitleChangeEffect = (
  titles: ArrayOfOneOrMore<string>,
  shouldIterateTitles: boolean,
  animationType: AnimationType,
  interval: number,
  shouldAlwaysPlay: boolean
) => {
  // ...
};

Then, introduce a new ref that you'll call 

 to store the original title of the page:

const originalTitleRef = useRef<string>(document.title);

 with the return cleanup function restoring the title:

// On unmount, restore the original title
useEffect(() => {
  return () => {
    document.title = originalTitleRef.current;
  };
}, []);

To handle the refocus case, you need to reset the title only in the case when 

// If shouldIterateTitles and shouldAlwaysPlay are both false, restore the original title
if (!shouldIterateTitles && !shouldAlwaysPlay) {
  document.title = originalTitleRef.current;
}

You also need to modify the original implementation of the switch case:

if (shouldIterateTitles || shouldAlwaysPlay) {
  switch (animationType) {
    case AnimationType.CASCADE:
      return runCascadeTitleLogic();
    case AnimationType.MARQUEE:
      return runMarqueeTitleLogic();
    case AnimationType.LOOP:
    default:
      return runLoopTitleLogic();
  }
}

, you need to add it to the dependency array of the 

[titles, titleIndex, shouldIterateTitles, shouldAlwaysPlay];

// Each time titleIndex changes and shouldIterateTitles is true, set the document.title to the value of titles at that index
useEffect(() => {
  if (shouldIterateTitles || shouldAlwaysPlay) {
    switch (animationType) {
      case AnimationType.CASCADE:
        return runCascadeTitleLogic();
      case AnimationType.MARQUEE:
        return runMarqueeTitleLogic();
      case AnimationType.LOOP:
      default:
        return runLoopTitleLogic();
    }
  }

  // If shouldIterateTitles and shouldAlwaysPlay are both false, restore the original title
  if (!shouldIterateTitles && !shouldAlwaysPlay) {
    document.title = originalTitleRef.current;
  }
}, [titles, titleIndex, shouldIterateTitles, shouldAlwaysPlay]);

---
title: Restore Original Values on Refocus and Unmount
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-16
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/yJQi6fbj7j7KnNyiu2wKFPjXFPUMW0100021JK01WZJbMJE.m3u8
---

So far, you might have noticed that what happens when focus is restored to the web page using your hook has been mostly ignored. The same is true for the case if `usePleaseStay` is unmounted for some reason. For both cases, whatever iteration or current state of the `document.title` or the favicon were set at would remain that way for the page. This isn't a good developer experience. To remedy this problem, you can store the original values of both the `title` and `favicon` in `ref`s via the `useRef` when the hook is used. When focus is restored to the page or `usePleaseStay` unmounts, you can restore those original values. This ensures a complete "leave no trace" life cycle. These changes will make it easy to mount and unmount your hook as needed without any extra coding effort from you as the developer using the hook.

## Modifications to `usePleaseStay`

Starting at the top hook, `usePleaseStay`, you first need to forward on `shouldAlwaysPlay` to both `useTitleChangeEffect` and `useFaviconChangeEffect`:

```ts
// Modifies the document.title of the page when shouldIterateTitles is true
useTitleChangeEffect(
  titles,
  shouldIterateTitles,
  animationType,
  interval,
  shouldAlwaysPlay
);

// Modifies the favicon of the page when shouldIterateTitles is true
useFaviconChangeEffect(
  faviconLinks,
  shouldIterateTitles,
  interval,
  shouldAlwaysPlay
);
```

## Modifications to `useTitleChangeEffect`

Now, make the modifications to `useTitleChangeEffect` to restore the original values when the component unmounts or focus is regained. Before anything, add the new `shouldAlwaysPlay` parameter to the function signature:

```ts
export const useTitleChangeEffect = (
  titles: ArrayOfOneOrMore<string>,
  shouldIterateTitles: boolean,
  animationType: AnimationType,
  interval: number,
  shouldAlwaysPlay: boolean
) => {
  // ...
};
```

Then, introduce a new ref that you'll call `originalTitleRef` to store the original title of the page:

```ts
const originalTitleRef = useRef<string>(document.title);
```

To handle the unmount case, add a `useEffect` with the return cleanup function restoring the title:

```ts
// On unmount, restore the original title
useEffect(() => {
  return () => {
    document.title = originalTitleRef.current;
  };
}, []);
```

To handle the refocus case, you need to reset the title only in the case when `shouldAlwaysPlay` is `true`. Add this to the `useEffect` that handles the `shouldIterateTitles` case:

```ts
// If shouldIterateTitles and shouldAlwaysPlay are both false, restore the original title
if (!shouldIterateTitles && !shouldAlwaysPlay) {
  document.title = originalTitleRef.current;
}
```

You also need to modify the original implementation of the switch case:

```ts
if (shouldIterateTitles || shouldAlwaysPlay) {
  switch (animationType) {
    case AnimationType.CASCADE:
      return runCascadeTitleLogic();
    case AnimationType.MARQUEE:
      return runMarqueeTitleLogic();
    case AnimationType.LOOP:
    default:
      return runLoopTitleLogic();
  }
}
```

Now that you are making use of `shouldAlwaysPlay` within `useTitleChangeEffect`, you need to add it to the dependency array of the `useEffect`:

```ts
[titles, titleIndex, shouldIterateTitles, shouldAlwaysPlay];
```

Combined, the main `useEffect` in `useTitleChangeEffect` should look like this:

```ts
// Each time titleIndex changes and shouldIterateTitles is true, set the document.title to the value of titles at that index
useEffect(() => {
  if (shouldIterateTitles || shouldAlwaysPlay) {
    switch (animationType) {
      case AnimationType.CASCADE:
        return runCascadeTitleLogic();
      case AnimationType.MARQUEE:
        return runMarqueeTitleLogic();
      case AnimationType.LOOP:
      default:
        return runLoopTitleLogic();
    }
  }

  // If shouldIterateTitles and shouldAlwaysPlay are both false, restore the original title
  if (!shouldIterateTitles && !shouldAlwaysPlay) {
    document.title = originalTitleRef.current;
  }
}, [titles, titleIndex, shouldIterateTitles, shouldAlwaysPlay]);
```

Altogether, `useTitleChangeEffect` now looks like this:

```ts
import { useEffect, useRef, useState } from "react";
import { TAB_CHARACTER_COUNT } from "../constants/Constants";
import { AnimationType } from "../enums/AnimationType";
import { ArrayOfOneOrMore } from "../types/ArrayOfOneOrMore";
import { useInterval } from "./useInterval";

export const useTitleChangeEffect = (
  titles: ArrayOfOneOrMore<string>,
  shouldIterateTitles: boolean,
  animationType: AnimationType,
  interval: number,
  shouldAlwaysPlay: boolean
) => {
  const [titleIndex, setTitleIndex] = useState(0);
  const originalTitleRef = useRef<string>(document.title);

  const runLoopIterationLogic = () => {
    const nextIndex = titleIndex + 1;
    nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
  };

  const runCascadeIterationLogic = () => {
    const nextIndex = titleIndex + 1;
    nextIndex === titles[0].length
      ? setTitleIndex(0)
      : setTitleIndex(nextIndex);
  };

  const runMarqueeIterationLogic = () => {
    const nextIndex = titleIndex + 1;
    nextIndex === TAB_CHARACTER_COUNT
      ? setTitleIndex(0)
      : setTitleIndex(nextIndex);
  };

  const runLoopTitleLogic = () => {
    document.title = titles[titleIndex];
  };

  const runCascadeTitleLogic = () => {
    document.title = titles[0].substring(0, titleIndex);
  };

Chris Frewin

Restore Original Values on Refocus and Unmount

So far, we've mostly ignored what happens when focus is restored to the web

The same is true for the case if used please stay is unmounted for some reason.

And for both cases, whatever iteration or current state of the document title

This isn't exactly a good developer experience.

For 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

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.

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.

Let's first tackle the modifications needed in use title change effect.

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. To handle the unmount

And we want in our cleanup function to restore the document title to our

To handle the refocusing case, we need to reset the title only when should

We can add this here to our use effect where we run the title logic.

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

We need to modify when the switch case is run with another if statement, which

will be the logical opposite of this statement. So should iterate titles, or

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

And that should be all we need to do within use title change effect.

We can pop 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.

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

And that's the value we'll use to restore on the case of on mount or refocusing

And as the initial value here, we can take this fav icon ref.current.

And being careful to use the optional chaining, we will take the href value.

So we know here in our get fav icon function that we don't necessarily return a

So that's why we'll use this optional chaining here because this current value

The unmount case is quite similar to what we saw in use title change effect.

We can write a new use effect function here.

And we want that to only fire on the unmount.

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.

Current href to the original fav icon href.current value.

For the refocusing case, we can refactor this use effect.

And what we'll do is if the should iterate fav icons is not true.

It's also not true, and we have both our fav icon ref current value.

And also the original fav icon ref current value.

Then we know just like in our unmount function that we can restore the href

And now since we're using both should iterate fav icons and should always play,

we should add those values to our dependency array.

And we can reformat this use fav icon change effect hook, save it, and we

And within our app.tsx, let's create a nice simple example to test all this

What I think makes sense is a animation type of just looping.

I'll just paste them in so I don't have to type them out.

But what I've got here is a new line 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.

And we have our defaults here the react logo and react app.

And of course, when we lose focus, we're toggling between Redux and new line.

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.

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.

Now to ensure that we don't accidentally restore defaults when should always

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript