 to test your hook, it will be much easier for you to do some refactoring and cleanups in the source codebase. The desired functionality you have described for your hook is working, but looking inside 

, the code is a bit hard to follow. It's fairly clean, but to fully understand it, you have to jump around all the 

 hooks and parts of state to follow the full chain of logic as to how each part works together. You're going to further clean up your custom hook by encapsulating certain parts of the logic into small, easy-to-understand files. Let's go through 

 from top to bottom and refactor as you go. 

The first refactor you'll make is with the 

 event listeners and side effects. You can create a new hook called 

cd src/hooks
touch useListenToVisibilityChangeOnMount.ts

export const useListenToVisibilityChangeOnMount = () => {
  // This is a visibilitychange event handler
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}

import { useEffect } from "react";

export const useListenToVisibilityChangeOnMount = (setShouldIterateTitles: (shouldIterateTitles: boolean) => void) => {
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}

For React, and JavaScript in general, passing the setter function as an argument is commonplace since the setter function is nothing more than a function. The original functionality you had should be retained. You just need to be sure that you import and are calling 

 with the proper set state function back in 

import { useEffect, useState } from "react";
import { useInterval } from "./useInterval";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";

export const usePleaseStay = (titles: string[]) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);
  const [titleIndex, setTitleIndex] = useState(0);

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
};

 to rerun the Rollup build script and refresh your example app. Everything should still be working as expected.

Already, you've halved the number of lines in 

, and encapsulated the event listener logic into the new 

 hook. Let's do this as well for the bottom two hooks, creating a new hook 

cd src/hooks
touch useTitleChangeEffect.ts

export const useTitleChangeEffect = () => {
// At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}

export const useTitleChangeEffect = () => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}

export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean) => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}

import { useState } from "react";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";
import { useTitleChangeEffect } from "./useTitleChangeEffect";

export const usePleaseStay = (titles: string[]) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // The document.title of the page is modified whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles)
};

Your hook is now much clearer and easier to read. The code in your entry point file 

 gives you a pretty good high-level overview of how the major parts of the hook work. If you need the details or want to add features later at deeper levels, you can go into 

As a double check, rebuild the hook, fire up the example app, and check to see that everything is working:

That's all for module one of this course! In module two, you'll start building more advanced and fun features for 

---
title: Cleaning Up and Refactoring react-use-please-stay
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-7
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/m732g2OJZinsbqc99Tzx02uof302EpjXa7VoDQwRl7FOw.m3u8
---

With the new ability to use `npm link` to test your hook, it will be much easier for you to do some refactoring and cleanups in the source codebase. The desired functionality you have described for your hook is working, but looking inside `usePleaseStay.ts`, the code is a bit hard to follow. It's fairly clean, but to fully understand it, you have to jump around all the `useEffect` hooks and parts of state to follow the full chain of logic as to how each part works together. You're going to further clean up your custom hook by encapsulating certain parts of the logic into small, easy-to-understand files. Let's go through `usePleaseStay.ts` from top to bottom and refactor as you go. 

## First Refactor: Creating a New Hook `useListenToVisibilityChangeOnMount`

The first refactor you'll make is with the `visibilitychange` event listeners and side effects. You can create a new hook called `useListenToVisibilityChangeOnMount`: 

```tsx
cd src/hooks
touch useListenToVisibilityChangeOnMount.ts
```

You can cut and paste the `handleVisibilityChange` function, as well as the on-mount `useEffect` which calls that function:

```tsx
export const useListenToVisibilityChangeOnMount = () => {
  // This is a visibilitychange event handler
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}
```

All you have to do now is pass the `setShouldIterateTitles` function into your hook, and import `useEffect` from React:

```tsx
import { useEffect } from "react";

export const useListenToVisibilityChangeOnMount = (setShouldIterateTitles: (shouldIterateTitles: boolean) => void) => {
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}
```

For React, and JavaScript in general, passing the setter function as an argument is commonplace since the setter function is nothing more than a function. The original functionality you had should be retained. You just need to be sure that you import and are calling `useListenToVisibilityChangeOnMount` with the proper set state function back in `usePleaseStay.ts`:

```tsx
import { useEffect, useState } from "react";
import { useInterval } from "./useInterval";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";

export const usePleaseStay = (titles: string[]) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);
  const [titleIndex, setTitleIndex] = useState(0);

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
};
```

Feel free to run `npm run build` to rerun the Rollup build script and refresh your example app. Everything should still be working as expected.

## Second Refactor: Creating a New Hook `useTitleChangeEffect`

Already, you've halved the number of lines in `usePleaseStay.ts`, and encapsulated the event listener logic into the new `useListenToVisibilityChangeOnMount` hook. Let's do this as well for the bottom two hooks, creating a new hook `useTitleChangeEffect`:

    cd src/hooks
    touch useTitleChangeEffect.ts

If you cut and paste what you had in `usePleaseStay`, your hook should look like this:

```tsx
export const useTitleChangeEffect = () => {
// At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}
```

You may notice that both `titleIndex` and `setTitleIndex` are unused in `usePleaseStay`. You can cut `titleIndex` and `setTitleIndex` out of `usePleaseStay.ts` and paste them into your new `useTitleChangeEffect` hook:

```tsx
export const useTitleChangeEffect = () => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}
```

Finally, let's add the required `titles` and `shouldIterateTitles` arguments to your `useTitleChangeEffect` hook, as well as the imports `useInterval` and `useEffect`:

```tsx
export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean) => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

  // Each time titleIndex changes, the document.title is set to the value of titles at that index
  useEffect(() => {
    document.title = titles[titleIndex];
  }, [titleIndex]);
}
```

Just as with `useListenToVisibilityChangeOnMount`, be sure `useTitleChangeEffect` is properly imported and used in `usePleaseStay`:

```tsx
import { useState } from "react";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";
import { useTitleChangeEffect } from "./useTitleChangeEffect";

export const usePleaseStay = (titles: string[]) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // The document.title of the page is modified whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles)
};
```

Your hook is now much clearer and easier to read. The code in your entry point file `usePleaseStay.ts` gives you a pretty good high-level overview of how the major parts of the hook work. If you need the details or want to add features later at deeper levels, you can go into `useListenToVisibilityChangeOnMount` and `useTitleChangeEffect` as needed.

As a double check, rebuild the hook, fire up the example app, and check to see that everything is working:

```shell
npm run build
cd example
npm start
```

In summary, you:

-   Created a new hook called `useListenToVisibilityChangeOnMount` and moved the `visibilitychange` event listener logic into it
-   Created a new hook called `useTitleChangeEffect` and moved the corresponding `useInterval` and `useEffect` logic into it
-   Imported and used the new hooks in `usePleaseStay`

That's all for module one of this course! In module two, you'll start building more advanced and fun features for `usePleaseStay`.


Chris Frewin

Cleaning Up and Refactoring react-use-please-stay

With the new ability of using npm link to test our hook, it'll be much easier

refactoring and cleanup in the source codebase. The desired functionality we've

our hook is working, but looking inside the source of use, please stay, the

bit hard to follow. It's fairly clean, but to fully understand it, we have to

these use effect and use interval hooks and all the parts of state to follow

as to how it all works together. We're going to further clean up our custom

certain parts of the logic to small, easy to understand files. Let's go through

from top to bottom and refactor it as we go. And so the first refactor we'll

visibility change event listeners and side effects. We can create a new hook

visibility change on mount. So we will export const, use listen to visibility

and we can cut and paste the handle visibility change function, as well as the

use effect hook into our new hook. All we have to do now is pass the set should

setter function into our hook, as well as use effect from react. We can clean

And now we've replaced that logic that we've cut out of our root hook with this

visibility change on mount, being sure to pass in the state setter function.

And to guide developers who may later read this hook, we can leave a little

exactly what is going on inside this hook. And so I'll say sets the should iter

whenever page visibility is lost. Also, I'll write handles removing the event

as well. Likewise, we can encapsulate these bottom two effects into a new

With this refactor, we can now see that both title index and set title index

So this is perfect for us. We can move this entire part of state into the new

Now let's add the required parameters titles.

As well as import use state, use interval, and use effect. And I'll clean that

And back in use, please stay. Let's make sure that use title change effect is

And we need to forward on the titles as well as the should iterate titles.

And just like we did for use listen to visibility change on mount, I'll also

here to help describe to developers what exactly is going on in the use title

And so we can just write modifies document.title of the page whenever

should iterate titles is true. And we can remove these unused imports.

And we should be all set. Our hook is now much more clear and easy to read.

The code in our entry point file, which is here, use please stay, gives us a

overview of how the major parts of the hook work. If we need details or want to

later at deeper levels, we can go into either use listen to visibility change

change effect. As a double check, let's rebuild the hook, fire up the example

And so as expected, we still see the exact same functionality.

And when I come back to the page, of course, the iteration stops.

In summary, we created a new hook called use listen to visibility change on

the entire visibility change event listener logic into it. We then created a

use title change effect. And we move the corresponding use interval and use

We imported and used both these hooks in use, please stay. And for both, we

comment to help developers in the future who may look into the source code of

That's all for module one of this course. In module two, we'll start building

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