Prevent Concurrent Usages of the Hook

[00:00 - 00:13] Since usePleaseStay modifies the document title at an interval, it's intended to be called only once. In other words, if we call usePleaseStay twice in a React component, it might lead to very strange behavior.

[00:14 - 00:34] So if somebody were to write some code like this, we might get some strange interval timings with the title, and it's really unclear actually what would happen. So to prevent developers from making this mistake of calling usePleaseStay multiple times, we'll leverage the browser's local storage API to create and check a global date variable.

[00:35 - 00:53] 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 we'll call use multiple instance check.

[00:54 - 01:25] So within our root SRC folder and within the hooks folder, I'm going to create a new file, use multiple instances check, and we'll export the const. And on mount, we want to check for our local storage value.

[01:26 - 01:59] So first, I'm going to set a value, setItem, and we'll just call it the same name as the hook itself, 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 local storage item.

[02:00 - 02:30] And as I said, this is on mount, so we should have nothing in the dependency array. And now for the actual implementation. So if the local storage item is not null , then we will leverage our issue warning message function.

[02:31 - 02:54] Use please stay should be mounted only once in an application. Doing otherwise could lead to range behavior.

[02:55 - 03:23] 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.

[03:24 - 03:50] Because react in development uses strict mode. This warning is only valid if you see this warning appear more than once with different dates in your console.

[03:51 - 04:07] 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.

[04:08 - 04:24] 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 errors and other best practices.

[04:25 - 04:42] And that's why for example we saw that log twice in the previous lesson. And the same will be true for this hook so that even though we're on mount, we will see two warning messages because the function body of app.tsx here in example in development mode will also be run twice.

[04:43 - 05:04] Essentially meaning that the component itself will be run twice. So let's import 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 parameters function.

[05:05 - 05:17] So to test this new functionality, let's build our hook. We'll move into the example and run the example application.

[05:18 - 05:27] Now we see what we've written is true. We know because of strict mode will anyway get two identical messages because in strict mode our on mount will fire twice.

[05:28 - 05:43] 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.

[05:44 - 05:56] This does indeed tell us that we're calling use please stay actually twice somewhere in our application. So if we remove this second call here save and refresh our application.

[05:57 - 06:10] Then we see we only get a single warning message and of course because there's only a single date nothing to compare to. We don't see two different dates flying around. We know that we're using use please stay only once across our entire application.

[06:11 - 06:35] So in summary we created a new custom hook which we called use multiple instances check 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.

[06:36 - 06:51] After implementing this hook we then added it to use please stay right under the validate parameters call. 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 application.

[06:52 - 06:56] And focus on the tab or if we unmount use please stay.