Let's finally get started with the first functionality of your hook. To start, focus on being able to display and loop through an array of titles passed to the hook. First, allow your hook to accept a parameter 

export const usePleaseStay = (titles: string[]) => {};

Next, you want the document title to animate when the tab has lost focus. Luckily, JavaScript provides a "visibilitychange" event that you can add a listener to. As soon as your hook mounts, begin listening for this event. Do this with 

, being sure to provide the empty dependency array so it fires on mount only:

// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
}, []);

The first thing you notice is that TypeScript is complaining about the 

{
  //...
  "lib": ["ess2015", "dom"]
  //...
}

It's also a best practice to remove listener functions whenever a React hook unmounts. This will prevent any sort of memory leaks from occurring in the case that whatever component calls usePleaseStay() is no longer rendered. This is possible within your useEffect hook, by returning a function from 

. Whatever is in this returned function is fired as part of the unmounting process. Use this to remove your event listener:

// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
  return () => {
    document.removeEventListener("visibilitychange", handleVisiblilityChange);
  };
}, []);

const handleVisibilityChange = () => {

}

, you should be iterating through the titles provided to your hook, otherwise you should stop toggling the titles. You can track whether or not you should be iterating through titles using a React state variable. Create a state value and setter pair using React's 

const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

, since you assume the hook mounts while the user is actually on your site.

 value is quite literally when the document is not visible:

// visibilitychange event handler
const handleVisiblilityChange = () => {
  setShouldIterateTitles(document.visibilityState !== "visible");
};

So, you now have a stateful variable that changes value when the visibility of the page changes. That's great! But you need to add functionality to actually modify the document title! For this, leverage JavaScript's 

 right away. It's not the best idea to use 

 directly with React hooks - like your document change function, you also need to account for cleanup for any intervals you set up to prevent memory leaks. This is a bit tricky to do in React, but it's definitely doable. Begin by writing a new custom React Hook 

, you can start scaffolding your custom hook. You'll need a function, called 

export const useInterval = (callback: () => void, interval: number) => {};

So far so good. First, you'll need to store a reference to the callback function. Again, another React hook comes into play here - 

// Store the callback in a ref
const callbackRef = useRef(callback);

, you'll need to update the callback functions if it changes - another use case for 

// Set callbackRef to the latest callback if callback changes
useEffect(() => {
  callbackRef.current = callback;
}, [callback]);

Finally within this hook you can get to using JavaScript's built-in 

 hook, whenever the interval value changes, call the current ref you have to the callback at the specified interval. As cleanup, remove this interval by calling 

 whenever this hook unmounts. Recall that cleanup tasks are written as a function returned from 

// Set up the interval
useEffect(() => {
  const id = setInterval(() => callbackRef.current(), interval);

  return () => clearInterval(id);
}, [interval]);

You should also have a way to start and stop 

export const useInterval = (
  callback: () => void,
  interval: number,
  shouldRun: boolean
) => {};

// Set up the interval
useEffect(() => {
  // Don't schedule if shouldRun is false
  if (!shouldRun) {
    return;
  }

  const id = setInterval(() => callbackRef.current(), interval);

  return () => clearInterval(id);
}, [interval, shouldRun]);

import { useRef, useEffect } from "react";

export const useInterval = (
  callback: () => void,
  interval: number,
  shouldRun: boolean
) => {
  // Store the callback in a ref
  const callbackRef = useRef(callback);

  // Set callbackRef to the latest callback if callback changes.
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    // Don't schedule if shouldRun is false.
    if (!shouldRun) {
      return;
    }

    const id = setInterval(() => callbackRef.current(), interval);

    return () => clearInterval(id);
  }, [interval, shouldRun]);
};

Nice! You've got a React lifecycle safe implementation for 

, start with just an empty function and use an interval of 500 milliseconds. Your 

 parameter to activate or deactivate the interval is 

useInterval(() => {}, 500, shouldIterateTitles);

Now implement the function that will actually run at the specified interval. You need to keep track of an index that runs from 0 to the final index of your titles array, and then starts over. First create the state variable and setter you will need to accomplish this. Call it 

const [titleIndex, setTitleIndex] = useState(0);

Now, to accomplish the index cycling logic you need, use a ternary, so that your completed 

useInterval(
  () => {
    const nextIndex = titleIndex + 1;
    nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
  },
  500,
  shouldIterateTitles
);

For readability, store the next index as a const called 

 is already the length of titles, then set the title index back to 0, otherwise use this next index.

 hook setup is very powerful for you: when 

, you iterate through your titles at your given interval, if it is 

 value to false, which as you know in your custom hook, stops the interval from running.

Finally you've arrived at the user-facing functionality of your hook - setting the value of 

 to the value of titles at that index! Perfect!

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

You should be all set. All together, your custom hook 

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

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

  // visibilitychange event handler
  const handleVisiblilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // on mount of this hook, add the event listener. on unmount, remove it
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisiblilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisiblilityChange);
    };
  }, []);

  // at an interval of 500 ms, increment the titleIndex value
  // reset it to 0 if we've reached the end of the list
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

Try out your hook to see if it's working as expected. First be sure you move into the example project:

With your new functionality now implemented, again copy in 

    "copy-hook": "cp ../src/hooks/usePleaseStay.ts src/hooks/usePleaseStay.ts && cp ../src/hooks/useInterval.ts src/hooks/useInterval.ts"

, you'll need to add your newly required array of title strings. Add 3, just for fun:

usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);

In your browser, if you have the React app page in focus, you should already see "Title One!" as the tab's title (this is the 

). Then, if you open another browser tab while leaving the app tab running, you'll see every 500 milliseconds the titles be looped through as specified!

Congratulations! You've already got a fully functioning React hook! In the next lesson, you'll learn how to package your hook as an npm module using Rollup.

---
title: Building Title Looping Functionality with the useEffect Hook
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-5
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/FYFxgGvUX3Q4OlUzkkMxjLWlKMJYBGd0000601VsSKjYNI.m3u8
---

Let's finally get started with the first functionality of your hook. To start, focus on being able to display and loop through an array of titles passed to the hook. First, allow your hook to accept a parameter `titles`, which is of type `string[]`, an array of strings.

```tsx
export const usePleaseStay = (titles: string[]) => {};
```

Next, you want the document title to animate when the tab has lost focus. Luckily, JavaScript provides a "visibilitychange" event that you can add a listener to. As soon as your hook mounts, begin listening for this event. Do this with `useEffect`, being sure to provide the empty dependency array so it fires on mount only:

```tsx
// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
}, []);
```

The first thing you notice is that TypeScript is complaining about the `document` types. You need to add `"dom"` to your `lib` array in `tsconfig.json`:

```json
{
  //...
  "lib": ["ess2015", "dom"]
  //...
}
```

It's also a best practice to remove listener functions whenever a React hook unmounts. This will prevent any sort of memory leaks from occurring in the case that whatever component calls usePleaseStay() is no longer rendered. This is possible within your useEffect hook, by returning a function from `useEffect`. Whatever is in this returned function is fired as part of the unmounting process. Use this to remove your event listener:

```tsx
// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
  return () => {
    document.removeEventListener("visibilitychange", handleVisiblilityChange);
  };
}, []);
```

Now you need to actually write your `handleVisibilityChange` function: 

```tsx
const handleVisibilityChange = () => {

}
```

When the value of `document.visibilityState` is _not_ `visible`, you should be iterating through the titles provided to your hook, otherwise you should stop toggling the titles. You can track whether or not you should be iterating through titles using a React state variable. Create a state value and setter pair using React's `useState` hook:

```tsx
const [shouldIterateTitles, setShouldIterateTitles] = useState(false);
```

Here, specify the default value as `false`, since you assume the hook mounts while the user is actually on your site.

Now you can write your `handleVisibilityChange` function, where the `shouldIterateTitles` value is quite literally when the document is not visible:

```tsx
// visibilitychange event handler
const handleVisiblilityChange = () => {
  setShouldIterateTitles(document.visibilityState !== "visible");
};
```

So, you now have a stateful variable that changes value when the visibility of the page changes. That's great! But you need to add functionality to actually modify the document title! For this, leverage JavaScript's `setInterval` function. However, you can't use `setInterval` right away. It's not the best idea to use `setInterval` directly with React hooks - like your document change function, you also need to account for cleanup for any intervals you set up to prevent memory leaks. This is a bit tricky to do in React, but it's definitely doable. Begin by writing a new custom React Hook `useInterval`:

Make a new file in the `hooks/` folder called `useInterval.ts`:

```shell
touch hooks/useInterval.ts
```

Within `useInterval.ts`, you can start scaffolding your custom hook. You'll need a function, called `callback`, type `() => void`, that you call, and then an `interval`, type `number` you want the function to fire at:

```tsx
export const useInterval = (callback: () => void, interval: number) => {};
```

So far so good. First, you'll need to store a reference to the callback function. Again, another React hook comes into play here - `useRef`:

```tsx
// Store the callback in a ref
const callbackRef = useRef(callback);
```

Along with `useRef`, you'll need to update the callback functions if it changes - another use case for `useEffect`:

```tsx
// Set callbackRef to the latest callback if callback changes
useEffect(() => {
  callbackRef.current = callback;
}, [callback]);
```

Finally within this hook you can get to using JavaScript's built-in `setInterval` function. Using another `useEffect` hook, whenever the interval value changes, call the current ref you have to the callback at the specified interval. As cleanup, remove this interval by calling `clearInterval` whenever this hook unmounts. Recall that cleanup tasks are written as a function returned from `useEffect`:

```tsx
// Set up the interval
useEffect(() => {
  const id = setInterval(() => callbackRef.current(), interval);

  return () => clearInterval(id);
}, [interval]);
```

You should also have a way to start and stop `setInterval` from running. Add a parameter `shouldRun`, type `boolean`, to your hook:

```tsx
export const useInterval = (
  callback: () => void,
  interval: number,
  shouldRun: boolean
) => {};
```

You can add `shouldRun` to the dependency array in the `useEffect` hook, and when `shouldRun` switches to `false`, you can `return` from your `useEffect` function without creating an interval:

```tsx
// Set up the interval
useEffect(() => {
  // Don't schedule if shouldRun is false
  if (!shouldRun) {
    return;
  }

  const id = setInterval(() => callbackRef.current(), interval);

  return () => clearInterval(id);
}, [interval, shouldRun]);
```

All together, `useEffect` looks like the following:

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

export const useInterval = (
  callback: () => void,
  interval: number,
  shouldRun: boolean
) => {
  // Store the callback in a ref
  const callbackRef = useRef(callback);

  // Set callbackRef to the latest callback if callback changes.
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    // Don't schedule if shouldRun is false.
    if (!shouldRun) {
      return;
    }

    const id = setInterval(() => callbackRef.current(), interval);

    return () => clearInterval(id);
  }, [interval, shouldRun]);
};
```

Nice! You've got a React lifecycle safe implementation for `setInterval`!

## Using `useInterval` in `usePleaseStay`

Jump back into `usePleaseStay.ts`. To start using `useInterval`, start with just an empty function and use an interval of 500 milliseconds. Your `shouldRun` parameter to activate or deactivate the interval is `shouldIterateTitles`!

```tsx
useInterval(() => {}, 500, shouldIterateTitles);
```

Now implement the function that will actually run at the specified interval. You need to keep track of an index that runs from 0 to the final index of your titles array, and then starts over. First create the state variable and setter you will need to accomplish this. Call it `titleIndex` and initialize it at 0:

```tsx
const [titleIndex, setTitleIndex] = useState(0);
```

Now, to accomplish the index cycling logic you need, use a ternary, so that your completed `useInterval` call will look like this:

```tsx
useInterval(
  () => {
    const nextIndex = titleIndex + 1;
    nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
  },
  500,
  shouldIterateTitles
);
```

For readability, store the next index as a const called `nextIndex`. If `nextIndex` is already the length of titles, then set the title index back to 0, otherwise use this next index.

This `useInterval` hook setup is very powerful for you: when `shouldIterateTitles` is `true`, you iterate through your titles at your given interval, if it is `false`, you set the `shouldRun` value to false, which as you know in your custom hook, stops the interval from running.

## Title Iteration Logic

Finally you've arrived at the user-facing functionality of your hook - setting the value of `document.title`! You can use another `useEffect` here - with your new state variable `titleIndex` in the dependency. Each time `titles` or `titleIndex` changes, set the `document.title` to the value of titles at that index! Perfect!

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

You should be all set. All together, your custom hook `usePleaseStay` currently looks like:

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

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

  // visibilitychange event handler
  const handleVisiblilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // on mount of this hook, add the event listener. on unmount, remove it
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisiblilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisiblilityChange);
    };
  }, []);

  // at an interval of 500 ms, increment the titleIndex value
  // reset it to 0 if we've reached the end of the list
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

## Trying the New Functionality

Try out your hook to see if it's working as expected. First be sure you move into the example project:

```shell
cd example
```

With your new functionality now implemented, again copy in `usePleaseStay.ts` and also copy in `useInterval.ts` as well now. You need to extend your `copy-hook` script in `package.json`:

```json
    "copy-hook": "cp ../src/hooks/usePleaseStay.ts src/hooks/usePleaseStay.ts && cp ../src/hooks/useInterval.ts src/hooks/useInterval.ts"
```

Now you can run your updated script:

```shell
npm run copy-hook
```

And in the call to `usePleaseStay` in `App.tsx`, you'll need to add your newly required array of title strings. Add 3, just for fun:

```tsx
usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);
```

Start up the React app with:

    npm start

In your browser, if you have the React app page in focus, you should already see "Title One!" as the tab's title (this is the `document.title`). Then, if you open another browser tab while leaving the app tab running, you'll see every 500 milliseconds the titles be looped through as specified!

In summary, you: 

-   Created an on-mount effect to listen to when the `visibilitychange` event is fired 
-   When `pagevisibility` is not set to `visible`, you set state variable `shouldIterateTitles` to `true`
-   Setting `shouldIterateTitles` to `true` triggers running an interval via your custom `useInterval` hook
-   You used this custom useInterval hook to iterate through `titleIndex`
-   You wrote a third and final `useEffect` hook to watch for changes in `titleIndex` to actually set the `document.title`

Congratulations! You've already got a fully functioning React hook! In the next lesson, you'll learn how to package your hook as an npm module using Rollup.


Chris Frewin

Building Title Looping Functionality with the useEffect Hook

Let's finally get started with the first functionality of our hook.

To start, we'll focus on being able to display and looping through an array of

First, open up the use.please.stay file and ensure that that's the one in the

directory and not the one in the example folder.

Now, let's allow our hook to accept parameter titles, which will be type array

Next, we want the document title to animate when the tab has lost focus.

Luckily, JavaScript provides a visibility change event that we can add a

As soon as our hook mounts, we'll begin listening for this event.

We can do this with React's use effect hook, being sure to provide the empty

And we'll call the actual event listener function handle visibility change.

And as I mentioned, since we only want this to run on mount, we'll pass an

Now, the first TypeScript error we have is that TypeScript cannot find the

document since we haven't included DOM in our lib compiler options.

So let's go to the TS config.json in our root and add the DOM library to the

It's also best practice to remove listener functions whenever a React hook un-

This is possible within our use effect hook by returning a function from use

Whatever is in this returned function is fired as part of the un-mounting

We can use this function to remove our event listener.

So that's return, use an arrow function, and document.

Remove event listener, visibility change, and the same function handle

Now we need to actually write our handle visibility change function.

When the value of document.visibility state is not visible, we should be iter

Otherwise we should stop iterating through those titles.

We can track whether or not we should be iterating through these titles using a

Let's create a state variable and setter pair using React's use state hook.

I will call them should iterate titles and set should iterate titles.

And so our handle visibility change function becomes set should iterate titles

the value of document.visibility state and when it does not equal visible.

So we now have a state variable that changes when the visibility of the page

We need to add functionality to actually modify the document title.

For this we will leverage JavaScript set interval function.

However, we can't use set interval right away.

It's not the best idea to use set interval directly with React hooks.

Like our document change function, we also need to account for cleanup and any

This is a bit tricky to do in React, but it's definitely doable.

Let's begin by writing a new custom React hook use interval.

So we'll make a new file right alongside use please stay called use interval.

So this will be export const use interval.

And for the parameters passed to this hook, we'll at least need a callback or

And the interval itself, which will be a number.

The first thing we'll do is store a reference to the callback that's passed in

We then need to make sure that every time callback changes, we're updating the

So once again, we require the use of use effect.

And whenever this callback changes, we're going to update the current value of

Finally, we can get to using JavaScript's built in set interval function.

And this one will fire whenever the interval changes.

So what we'll do is store the interval ID from set interval.

And as mentioned, the whole reason we're creating this custom hook is so we can

So just as we did in use please stay, we'll use the return function in use

And that can be done by calling JavaScript's built in clear interval function

We should also have a way to start and stop this set interval call from running

Let's add a parameter should run type Boolean to our hook.

We can add should run to the dependency array in our second use effect hook.

And when should run switches to false, we can simply return from this effect.

And we now have a react lifecycle safe way of using set interval.

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