 is intended to be called only once. In other words, if you call 

 twice in a React component, it might lead to very strange behavior in the 

export const App = () => {
  usePleaseStay({titles: ["Hello, world!", "Come back!"]});
  usePleaseStay({titles: ["Huh?", "What will happen here?"]});
};

To prevent developers making the mistake of calling 

 multiple times, you will use the browser's 

 API to create a and check a global date variable. Leverage the 

 from the previous lesson to warn them that if they see different dates, they are calling the hook more than once. You can create another custom hook to use with 

touch src/hooks/useMultipleInstancesCheck.ts

import { useEffect } from "react";
import { issueWarningMessage } from "../utils/issueWarningMessage";

export const useMultipleInstancesCheck = () => {
  // on mount, check if you have double useages of the hook
  useEffect(() => {
    if (localStorage.getItem("usePleaseStay") !== null) {
      issueWarningMessage(
        `usePleaseStay should be mounted only once in an application. Doing otherwise could lead to 👻 strange 👻 behavior. usePleaseStay was last mounted at ${localStorage.getItem(
          "usePleaseStay"
        )} Please check your code for multiple usePleaseStay usages. Because React in development uses StrictMode, this warning is only valid if you see this warning appear more than once with different dates in your console. See here for more information: https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state`
      );
    }
    // on mount, set the storage value to the curent ISO time
    localStorage.setItem("usePleaseStay", new Date().toISOString());
    // on unmount, remove the value from localStorage
    return () => localStorage.removeItem("usePleaseStay");
  }, []);
};

And you can add it right after the call to 

---
title: Prevent Concurrent Usages of the Hook
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-15
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/bGhE6qTP1o00Vdu557F2G81l4101Q4lDMq7vJMMWHyHGU.m3u8
---

Since `usePleaseStay` modifies the `document.title` at an interval, `usePleaseStay` is intended to be called only once. In other words, if you call `usePleaseStay` twice in a React component, it might lead to very strange behavior in the `document.title`:

```tsx
export const App = () => {
  usePleaseStay({titles: ["Hello, world!", "Come back!"]});
  usePleaseStay({titles: ["Huh?", "What will happen here?"]});
};
```

To prevent developers making the mistake of calling `usePleaseStay` multiple times, you will use the browser's `localStorage` API to create a and check a global date variable. Leverage the `issueWarningMessage` from the previous lesson to warn them that if they see different dates, they are calling the hook more than once. You can create another custom hook to use with `usePleaseStay`, called `useMultipleInstancesCheck`. Create it in the `hooks/` directory:

```shell
touch src/hooks/useMultipleInstancesCheck.ts
```

Add this code to it:

```tsx
import { useEffect } from "react";
import { issueWarningMessage } from "../utils/issueWarningMessage";

export const useMultipleInstancesCheck = () => {
  // on mount, check if you have double useages of the hook
  useEffect(() => {
    if (localStorage.getItem("usePleaseStay") !== null) {
      issueWarningMessage(
        `usePleaseStay should be mounted only once in an application. Doing otherwise could lead to 👻 strange 👻 behavior. usePleaseStay was last mounted at ${localStorage.getItem(
          "usePleaseStay"
        )} Please check your code for multiple usePleaseStay usages. Because React in development uses StrictMode, this warning is only valid if you see this warning appear more than once with different dates in your console. See here for more information: https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state`
      );
    }
    // on mount, set the storage value to the curent ISO time
    localStorage.setItem("usePleaseStay", new Date().toISOString());
    // on unmount, remove the value from localStorage
    return () => localStorage.removeItem("usePleaseStay");
  }, []);
};
```

Chris Frewin

Prevent Concurrent Usages of the Hook

Since usePleaseStay modifies the document title at an interval, it's intended

In other words, if we call usePleaseStay twice in a React component, it might

So if somebody were to write some code like this, we might get some strange

and it's really unclear actually what would happen.

So to prevent developers from making this mistake of calling usePleaseStay

we'll leverage the browser's local storage API to create and check a global

We'll use the issue warning message function from the previous lesson to warn

them that if they see different dates issued to the console,

then they are calling the hook more than once.

To accomplish the whole functionality, we'll create another custom hook which

So within our root SRC folder and within the hooks folder, I'm going to create

a new file, use multiple instances check,

And on mount, we want to check for our local storage value.

So first, I'm going to set a value, setItem, and we'll just call it the same

and we'll just set it to new date and in ISO format.

And then being respectful of the lifecycle as we've seen, we want to return a

function that will run the cleanup and the cleanup for us is removing that

And as I said, this is on mount, so we should have nothing in the dependency

And now for the actual implementation. So if the local storage item is not null

then we will leverage our issue warning message function.

Use, please stay should be mounted only once in an application.

Doing otherwise could lead to range behavior.

Use, please stay was last mounted at, we'll get our value from local storage,

get item, and we know it's not null because of our if statement.

Then, please check your code for multiple use, please stay usages.

Because react in development uses strict mode.

This warning is only valid if you see this warning appear more than once with

See here for more information and we'll add a link to the official

documentation on strict mode. That goes back to what we briefly discussed in

the previous lesson, these double renderings.

React in development mode runs things. React in development mode in strict mode

runs quite a few things doubly, and that's to check against certain life cycle

That's why for example we saw that log twice in the previous lesson.

For use effect here and I'm going to clean up our hook and within use, please

stay, we can add this use multiple instance check right under our validate

So to test this new functionality, let's build our hook.

We'll move into the example and run the example application.

We know because of strict mode will anyway get two identical messages because

in strict mode our on mount will fire twice.

So this is expected but of course as our message suggests, we should look for

different dates in this warning message and we do indeed see these two

different dates we have 1045, 27 and 1045, 41.

This does indeed tell us that we're calling use, please stay actually twice

So if we remove the second call here, save and refresh our application, then we

see we only get a single warning message and of course because there's only a

We don't see two different dates flying around.

We know that we're using use, please stay only once across our entire

So in summary, we created a new custom hook, which we called use multiple

And we use the local storage API to set an item called use, please stay.

And we check for this value and use our warning message logger to warn the user

that if they do see different values in this date, that means that they've

called the hook more than once in the application.

After implementing this hook, we then added it to use, please stay right under

In the next lesson, we'll look at restoring all the original values like the

title and fav icon that were present in the application when we come back and

focus on the tab or if we unmount use, please stay.

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