Course Introduction

Environment Setup With nvm

Scaffolding a React Hook Library with npm init

Building a Skeleton create-react-app to Test the Hook

Building Title Looping Functionality with the useEffect Hook

Packaging react-use-please-stay as an npm Module using Rollup

Cleaning Up and Refactoring react-use-please-stay

In this module, you'll focus on scaffolding all the tooling, building, and an example app to test your hook.

Building the First Functionalities of the react-use-please-stay Hook

Implementing a Cascading Letter Functionality

Implementing a Marquee Functionality

Implementing Favicon Modification Functionality

Add Interval Time as a Hook Parameter

Add Should Always Play as a Hook Parameter

In this module, you'll build more complex functionalities like changing the document title in advanced ways and even altering the favicon.

Adding Advanced Functionalities to react-use-please-stay

Use Custom Types to Type the Hook Parameters

Adding a Development-only Warning Logger

Prevent Concurrent Usages of the Hook

Restore Original Values on Refocus and Unmount

Publish the Hook to npm

In this module, you'll go through some optimizations and improvements to make a truly state-of-the-art React Hook package, and publish it to npm.

Finishing Touches and Optimizations

Prepare the Example App as a Public Example Page

Publish the Example App to GitHub Pages

In this module, you'll publish the example app to double as a live example of the hook running, as well as a complete documentation site.

Finalizing and Publishing the Example App

In **Master Custom React Hooks with TypeScript**, you will learn everything you need to start — completely from scratch — to publishing a fully-fledged React Hook built with Typescript, including a variety of complex features, detailed documentation, and a fully interactive example site. The course spans **4 modules** with a total of **19 lessons** and **over 2 hours of video content**. Here's a preview of what you'll learn in each module:

After completing Craft a Custom React Hook npm Package with React and TypeScript, students now possess the skills to build amazing React Hooks with React and TypeScript.

What the Students are Saying

react

typescript

Organize and abstract away complexity with React Hooks.

19 Video Lessons on React and TypeScript

Interactive, Live Project Demos

Complete Project Source Code

### Master the Art of Building Advanced React Hooks with TypeScript

Welcome to "Master Custom React Hooks with TypeScript," a comprehensive online course designed to elevate your skills in React development, more preciesly in creating Custom React Hooks with TypeScript. Led by seasoned software engineer Chris Frewin, this course dives into the intricacies of building custom and open-source React Hooks using TypeScript.

### Why React Hooks are Such a Pain to Learn

Learning React Hooks can be a formidable journey, especially for seasoned engineers venturing into new territories. Add TypeScript to the mix and the challenge becomes even greater. Here are common challenges you may have encountered:

- The official React documentation is infamous for its lack of complex examples, and it's even harder to find production-ready examples using both React and TypeScript combined. 
- The intricacies of React Hooks and TypeScript may seem daunting, leading to a sense of overwhelm as you navigate through the complexities of these technologies.
- Integrating TypeScript seamlessly with React and understanding how to leverage it effectively can be a puzzle, causing frustration for those aiming to build robust applications.
- Mastering state management with React Hooks requires a deep understanding of React fundamentals. Many face challenges in effectively utilizing useState, useEffect, and other hooks for optimal application performance. One of these most famous pitfalls is the infinite re-render loop that can occur when using useEffect.

### How This Course Helps

This course addresses these frustrations head-on, providing you with practical lessons filled with code implementations based on real-world experience to navigate the complexities of React Hooks and TypeScript with confidence.

### Why Invest Your Time in React Hooks and TypeScript Now?

In the dynamic landscape of software development, staying current is crucial. Here's why learning React Hooks and TypeScript is not just beneficial but essential for software engineers like yourself:

1. **React with React Hooks and TypeScript reigns as the Gold Standard of Web Development:** Even today, React is still oen of the most popular JavaScript frontend framework. By mastering React Hooks and TypeScript, you position yourself at the forefront of modern web development, ensuring your skill set aligns with the latest industry standards.

2. **Enhanced Developer Productivity:** TypeScript's static typing and React's declarative approach can significantly boost your productivity, allowing you to catch errors early and streamline your development workflow.

3. **Industry Demand:** Employers increasingly seek developers well-versed in React Hooks and TypeScript. Adding these skills to your arsenal makes you a sought-after professional in today's competitive job market.

4. **Optimized Application Performance:** React Hooks provide a more efficient and scalable way to manage state and side effects, contributing to the creation of high-performance applications that meet user expectations.

5. **Community Support and Resources:** The React and TypeScript communities are thriving. Learning these technologies now means tapping into a vast pool of resources, support forums, and collaborative opportunities.

Investing your time in mastering React Hooks and TypeScript not only equips you with cutting-edge skills but also positions you for success in the ever-evolving field of software development allowing you to join the ranks of forward-thinking developers embracing these technologies.

### Course Content Overview
Course Overview: Total Modules: **4** Total Lessons: **19** Total Video Runtime: **2 hours, 19 minutes**

Build Powerful React Hooks with TypeScript

Learn how to build an advanced React Hook with TypeScript, you will start from a blank editor and end with a complete and published open-source npm package.
This course contains 19 lessons, each complete with live coding examples for students to study and build upon. 
By the end of the course, you'll have built an extremely clean React Hook and published it to npm with multiple features, documentation, and a fully interactive example site. Along the way, you'll also learn best practices around using TypeScript with React Hooks.

Master Custom React Hooks with TypeScript

Build a powerful hook that enables complex functionality with just one line in a component of your choice.

Build a React Hook npm package with built-in TypeScript type declarations.

Build an example site that updates the hook's properties in real-time.

How to craft **custom React Hooks using TypeScript**

Importance of the **full lifecycle** (mount, unmount, and more) of React Hooks

How to **integrate TypeScript types** with custom React Hooks

What problems **TypeScript with React Hooks** can solve

How to create a **community-ready** custom React Hook package that is a **joy to use**

How to add basic functionalities including **Title Looping**, **Packaging the Module** using **Roolup**, and **Cleaning Up and Refactoring** just to name a few.

How to add advanced functionalities including the immplementation of **Cascading Letter**, **Marquee**, **Favicon Modification**, **Interval Time as a Hook Parameter**, and **Should Always Plas as Hook Parameter** just to name a few.

 How to implement optimization such as **Custom Types**, **Development-only Warning Logger**, preventing concurent usages of the Hook, restoring origional values on **Refocus** and **Unmount**, and more.

 to test your hook, it will be much easier for you to do some refactoring and cleanups in the source codebase. The desired functionality you have described for your hook is working, but looking inside 

, the code is a bit hard to follow. It's fairly clean, but to fully understand it, you have to jump around all the 

 hooks and parts of state to follow the full chain of logic as to how each part works together. You're going to further clean up your custom hook by encapsulating certain parts of the logic into small, easy-to-understand files. Let's go through 

 from top to bottom and refactor as you go. 

The first refactor you'll make is with the 

 event listeners and side effects. You can create a new hook called 

cd src/hooks
touch useListenToVisibilityChangeOnMount.ts

export const useListenToVisibilityChangeOnMount = () => {
  // This is a visibilitychange event handler
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}

import { useEffect } from "react";

export const useListenToVisibilityChangeOnMount = (setShouldIterateTitles: (shouldIterateTitles: boolean) => void) => {
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}

For React, and JavaScript in general, passing the setter function as an argument is commonplace since the setter function is nothing more than a function. The original functionality you had should be retained. You just need to be sure that you import and are calling 

 with the proper set state function back in 

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

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

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

 to rerun the Rollup build script and refresh your example app. Everything should still be working as expected.

Already, you've halved the number of lines in 

, and encapsulated the event listener logic into the new 

 hook. Let's do this as well for the bottom two hooks, creating a new hook 

cd src/hooks
touch useTitleChangeEffect.ts

export const useTitleChangeEffect = () => {
// At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

export const useTitleChangeEffect = () => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean) => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

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

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

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // The document.title of the page is modified whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles)
};

Your hook is now much clearer and easier to read. The code in your entry point file 

 gives you a pretty good high-level overview of how the major parts of the hook work. If you need the details or want to add features later at deeper levels, you can go into 

As a double check, rebuild the hook, fire up the example app, and check to see that everything is working:

You can also try out the code for this lesson in the Replit below:

That's all for module one of this course! In module two, you'll start building more advanced and fun features for 

---
title: Cleaning Up and Refactoring react-use-please-stay
code: https://gitlab.com/fullstackio/books/master-custom-react-hooks-with-typescript/-/blob/production/course/code/lesson-7
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/RFxPgA024H3vpmY8xcV1io313hLTDm93PYRYSEO02B00aU.m3u8
---

With the new ability to use `npm link` to test your hook, it will be much easier for you to do some refactoring and cleanups in the source codebase. The desired functionality you have described for your hook is working, but looking inside `usePleaseStay.ts`, the code is a bit hard to follow. It's fairly clean, but to fully understand it, you have to jump around all the `useEffect` hooks and parts of state to follow the full chain of logic as to how each part works together. You're going to further clean up your custom hook by encapsulating certain parts of the logic into small, easy-to-understand files. Let's go through `usePleaseStay.ts` from top to bottom and refactor as you go. 

## First Refactor: Creating a New Hook `useListenToVisibilityChangeOnMount`

The first refactor you'll make is with the `visibilitychange` event listeners and side effects. You can create a new hook called `useListenToVisibilityChangeOnMount`: 

```tsx
cd src/hooks
touch useListenToVisibilityChangeOnMount.ts
```

You can cut and paste the `handleVisibilityChange` function, as well as the on-mount `useEffect` which calls that function:

```tsx
export const useListenToVisibilityChangeOnMount = () => {
  // This is a visibilitychange event handler
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}
```

All you have to do now is pass the `setShouldIterateTitles` function into your hook, and import `useEffect` from React:

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

export const useListenToVisibilityChangeOnMount = (setShouldIterateTitles: (shouldIterateTitles: boolean) => void) => {
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Upon mounting of this hook, the event listener is added. Upon unmounting, it is removed
  useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);
}
```

For React, and JavaScript in general, passing the setter function as an argument is commonplace since the setter function is nothing more than a function. The original functionality you had should be retained. You just need to be sure that you import and are calling `useListenToVisibilityChangeOnMount` with the proper set state function back in `usePleaseStay.ts`:

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

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

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

Feel free to run `npm run build` to rerun the Rollup build script and refresh your example app. Everything should still be working as expected.

## Second Refactor: Creating a New Hook `useTitleChangeEffect`

Already, you've halved the number of lines in `usePleaseStay.ts`, and encapsulated the event listener logic into the new `useListenToVisibilityChangeOnMount` hook. Let's do this as well for the bottom two hooks, creating a new hook `useTitleChangeEffect`:

    cd src/hooks
    touch useTitleChangeEffect.ts

If you cut and paste what you had in `usePleaseStay`, your hook should look like this:

```tsx
export const useTitleChangeEffect = () => {
// At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

You may notice that both `titleIndex` and `setTitleIndex` are unused in `usePleaseStay`. You can cut `titleIndex` and `setTitleIndex` out of `usePleaseStay.ts` and paste them into your new `useTitleChangeEffect` hook:

```tsx
export const useTitleChangeEffect = () => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length
        ? setTitleIndex(0)
        : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

Finally, let's add the required `titles` and `shouldIterateTitles` arguments to your `useTitleChangeEffect` hook, as well as the imports `useInterval` and `useEffect`:

```tsx
export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean) => {
  const [titleIndex, setTitleIndex] = useState(0);

  // At an interval of 500 ms, the titleIndex value is incremented
  // It is reset to 0 if the end of the list is reached
  useInterval(
    () => {
      const nextIndex = titleIndex + 1;
      nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
    },
    500,
    shouldIterateTitles
  );

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

Just as with `useListenToVisibilityChangeOnMount`, be sure `useTitleChangeEffect` is properly imported and used in `usePleaseStay`:

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

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

  // The shouldIterateTitles value is set whenever page visibility is lost.
  // The event listener is also removed in the cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // The document.title of the page is modified whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles)
};
```

Your hook is now much clearer and easier to read. The code in your entry point file `usePleaseStay.ts` gives you a pretty good high-level overview of how the major parts of the hook work. If you need the details or want to add features later at deeper levels, you can go into `useListenToVisibilityChangeOnMount` and `useTitleChangeEffect` as needed.

As a double check, rebuild the hook, fire up the example app, and check to see that everything is working:

```shell
npm run build
cd example
npm start
```

You can also try out the code for this lesson in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/react-use-please-stay-lesson-7" />

In summary, you:

-   Created a new hook called `useListenToVisibilityChangeOnMount` and moved the `visibilitychange` event listener logic into it
-   Created a new hook called `useTitleChangeEffect` and moved the corresponding `useInterval` and `useEffect` logic into it
-   Imported and used the new hooks in `usePleaseStay`

That's all for module one of this course! In module two, you'll start building more advanced and fun features for `usePleaseStay`.
