 calls has been hard-coded at 500 milliseconds. To make this configurable, add a parameter that can be passed to your hook. First, add it to the signature of 

export const usePleaseStay = (
  // ... other parameters...
  interval: number
) => {

Next, you need to pass it through to both 

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

export const usePleaseStay = (
  titles: string[],
  animationType: AnimationType,
  faviconLinks: string[],
  interval: number
) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // Sets the value of shouldIterateTitles when page visibility is lost.
  // Also handles the removal of the event listener during cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

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

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

export const useTitleChangeEffect = (
  titles: string[],
  shouldIterateTitles: boolean,
  animationType: AnimationType,
  interval: number
) => {
  // ...
  useInterval(
    () => {
      switch (animationType) {
        case AnimationType.CASCADE:
          return runCascadeIterationLogic();
        case AnimationType.MARQUEE:
          return runMarqueeIterationLogic();
        case AnimationType.LOOP:
        default:
          return runLoopIterationLogic();
      }
    },
    interval,
    shouldIterateTitles
  );
  // ...
};

export const useFaviconChangeEffect = (
  faviconLinks: string[],
  shouldIterateFavicons: boolean,
  interval: number
) => {
  // ...
  useInterval(
    () => {
      const nextIndex = faviconIndex + 1;
      nextIndex === faviconLinks.length
        ? setFaviconIndex(0)
        : setFaviconIndex(nextIndex);
    },
    interval,
    shouldIterateFavicons
  );
  // ...
};

---
title: Add Interval Time as a Hook Parameter
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-11
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/l01Idug5BcEml3bnwtpHSTb3fWSeidLHn00ivfaIGh01ls.m3u8
---

So far, the interval used by your `useInterval` calls has been hard-coded at 500 milliseconds. To make this configurable, add a parameter that can be passed to your hook. First, add it to the signature of `usePleaseStay`:

```tsx
export const usePleaseStay = (
  // ... other parameters...
  interval: number
) => {
```

Next, you need to pass it through to both `useTitleChangeEffect` and `useFaviconChangeEffect`:

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

export const usePleaseStay = (
  titles: string[],
  animationType: AnimationType,
  faviconLinks: string[],
  interval: number
) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // Sets the value of shouldIterateTitles when page visibility is lost.
  // Also handles the removal of the event listener during cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

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

Chris Frewin

Add Interval Time as a Hook Parameter

So far the interval used by our use interval calls in both title change effect

In fav icon change effect is hard-coded at 500 milliseconds

We should instead have this be a parameter that can be passed into our hook

So let's first add it to the signature of use please stay

And we'll just call it interval and we know it's a type number

We then need to pass this through to both the use title change effect

And we'll swap out the 500 here for interval

You can save this and the same for use fav icon change effect

And as a quick check let's rebuild the hook

Let's keep the configuration from last lesson, but we'll pass an interval of

The change is a little bit slower, it's not a half second now, but every three

So it looks like our new interval parameter works just fine

So in summary we added a new interval parameter to use please stay

we passed this parameter on to both the use title change effect and

use fav icon change effect and in both of those hooks instead of the hard-coded

In the next lesson, we'll add yet another parameter which will allow the user

to always play the animation and not just when the page

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