Cleaning Up and Refactoring react-use-please-stay
Lesson Transcript
[00:00 - 02:33] With the new ability of using MPM Link to test our hook, it'll be much easier for us to do some refactoring and clean up in the source codebase. The desired functionality we 've described for our hook is working, but looking inside the source of use please stay, the code itself is a little bit hard to follow. It's fairly clean, but to fully understand it, we have to jump around all these use effect and use interval hooks and all the parts of state to follow the full chain of logic as to how it all works together. We're going to further clean up our custom hook by encapsulating certain parts of the logic to small, easy to understand files. Let's go through use please stay here from top to bottom and refactor it as we go. And so the first refactor we 'll make is with the visibility change event listeners and side effects. We can create a new hook called use listen to visibility change on mount. So we will export const, use listen to visibility change on mount, and we can cut and paste the handle visibility change function as well as the on mount use effect hook into our new hook. All we have to do now is pass the set should iterate title state setter function into our hook as well as use effect from react. We can clean that up. And now we've replaced that logic that we've cut out of our root hook with this use listen to 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 comment to describe exactly what is going on inside this hook. And so I'll say sets the should iterate titles value whenever page visibility is lost.
[02:34 - 02:59] Also, I'll write handles removing the event listener in cleanup as well. Likewise, we can encapsulate these bottom two effects into a new custom hook, which I'll call use title change effect.
[03:00 - 03:31] So with this refactor, we can now see that both title index and set title index are unused. So this is perfect for us. We can move this entire part of state into the new hook.
[03:32 - 03:54] Now let's add the required parameters titles. And should iterate titles as well as import use state, use interval, and use effect.
[03:55 - 04:05] And I'll clean that up. And back in use, please stay. Let's make sure that use title change effect is being used properly.
[04:06 - 04:50] 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 leave a small comment here to help describe to developers what exactly is going on in the use title change effect. 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.
[04:51 - 05:40] The code in our entry point file, which is here, use please stay, gives us a pretty good high level overview of how the major parts of the hook work. If we need details or want to add features later at deeper levels, we can go into either use listen to visibility change on mount or use title change effect. As a double check, let's rebuild the hook, fire up the example app, and check to see that everything is working. [silence] And so as expected, we still see the exact same functionality.
[05:41 - 06:28] And when I come back to the page, of course, the iteration stops. [silence] In summary, we created a new hook called use listen to visibility change on mount and move the entire visibility change event listener logic into it. We then created a new hook called use title change effect. And we move the corresponding use interval and use effect logic into it . We imported and used both these hooks in use please stay. And for both, we left a nice descriptive comment to help developers in the future who may look into the source code of this hook. That's all for module one of this course. In module two, we'll start building out more advanced and fun features for use please stay.
[00:00 - 02:33] With the new ability of using MPM Link to test our hook, it'll be much easier for us to do some refactoring and clean up in the source codebase. The desired functionality we 've described for our hook is working, but looking inside the source of use please stay, the code itself is a little bit hard to follow. It's fairly clean, but to fully understand it, we have to jump around all these use effect and use interval hooks and all the parts of state to follow the full chain of logic as to how it all works together. We're going to further clean up our custom hook by encapsulating certain parts of the logic to small, easy to understand files. Let's go through use please stay here from top to bottom and refactor it as we go. And so the first refactor we 'll make is with the visibility change event listeners and side effects. We can create a new hook called use listen to visibility change on mount. So we will export const, use listen to visibility change on mount, and we can cut and paste the handle visibility change function as well as the on mount use effect hook into our new hook. All we have to do now is pass the set should iterate title state setter function into our hook as well as use effect from react. We can clean that up. And now we've replaced that logic that we've cut out of our root hook with this use listen to 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 comment to describe exactly what is going on inside this hook. And so I'll say sets the should iterate titles value whenever page visibility is lost.
[02:34 - 02:59] Also, I'll write handles removing the event listener in cleanup as well. Likewise, we can encapsulate these bottom two effects into a new custom hook, which I'll call use title change effect.
[03:00 - 03:31] So with this refactor, we can now see that both title index and set title index are unused. So this is perfect for us. We can move this entire part of state into the new hook.
[03:32 - 03:54] Now let's add the required parameters titles. And should iterate titles as well as import use state, use interval, and use effect.
[03:55 - 04:05] And I'll clean that up. And back in use, please stay. Let's make sure that use title change effect is being used properly.
[04:06 - 04:50] 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 leave a small comment here to help describe to developers what exactly is going on in the use title change effect. 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.
[04:51 - 05:40] The code in our entry point file, which is here, use please stay, gives us a pretty good high level overview of how the major parts of the hook work. If we need details or want to add features later at deeper levels, we can go into either use listen to visibility change on mount or use title change effect. As a double check, let's rebuild the hook, fire up the example app, and check to see that everything is working. [silence] And so as expected, we still see the exact same functionality.
[05:41 - 06:28] And when I come back to the page, of course, the iteration stops. [silence] In summary, we created a new hook called use listen to visibility change on mount and move the entire visibility change event listener logic into it. We then created a new hook called use title change effect. And we move the corresponding use interval and use effect logic into it . We imported and used both these hooks in use please stay. And for both, we left a nice descriptive comment to help developers in the future who may look into the source code of this hook. That's all for module one of this course. In module two, we'll start building out more advanced and fun features for use please stay.