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.

Let's finally get started with the first functionality of your hook. To start, focus on being able to display and loop through an array of titles passed to the hook. First, allow your hook to accept a parameter 

export const usePleaseStay = (titles: string[]) => {};

Next, you want the document title to animate when the tab has lost focus. Luckily, JavaScript provides a "visibilitychange" event that you can add a listener to. As soon as your hook mounts, begin listening for this event. Do this with 

, being sure to provide the empty dependency array so it fires on mount only:

// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
}, []);

The first thing you notice is that TypeScript is complaining about the 

{
  //...
  "lib": ["ess2015", "dom"]
  //...
}

It's also a best practice to remove listener functions whenever a React hook unmounts. This will prevent any sort of memory leaks from occurring in the case that whatever component calls usePleaseStay() is no longer rendered. This is possible within your useEffect hook, by returning a function from 

. Whatever is in this returned function is fired as part of the unmounting process. Use this to remove your event listener:

// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
  return () => {
    document.removeEventListener("visibilitychange", handleVisiblilityChange);
  };
}, []);

const handleVisibilityChange = () => {

}

, you should be iterating through the titles provided to your hook, otherwise you should stop toggling the titles. You can track whether or not you should be iterating through titles using a React state variable. Create a state value and setter pair using React's 

const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

, since you assume the hook mounts while the user is actually on your site.

 value is quite literally when the document is not visible:

// visibilitychange event handler
const handleVisiblilityChange = () => {
  setShouldIterateTitles(document.visibilityState !== "visible");
};

So, you now have a stateful variable that changes value when the visibility of the page changes. That's great! But you need to add functionality to actually modify the document title! For this, leverage JavaScript's 

 right away. It's not the best idea to use 

 directly with React hooks - like your document change function, you also need to account for cleanup for any intervals you set up to prevent memory leaks. This is a bit tricky to do in React, but it's definitely doable. Begin by writing a new custom React Hook 

, you can start scaffolding your custom hook. You'll need a function, called 

export const useInterval = (callback: () => void, interval: number) => {};

So far so good. First, you'll need to store a reference to the callback function. Again, another React hook comes into play here - 

// Store the callback in a ref
const callbackRef = useRef(callback);

, you'll need to update the callback functions if it changes - another use case for 

// Set callbackRef to the latest callback if callback changes
useEffect(() => {
  callbackRef.current = callback;
}, [callback]);

Finally within this hook you can get to using JavaScript's built-in 

 hook, whenever the interval value changes, call the current ref you have to the callback at the specified interval. As cleanup, remove this interval by calling 

 whenever this hook unmounts. Recall that cleanup tasks are written as a function returned from 

// Set up the interval
useEffect(() => {
  const id = setInterval(() => callbackRef.current(), interval);

  return () => clearInterval(id);
}, [interval]);

---
title: Building Title Looping Functionality with the useEffect Hook
code: https://gitlab.com/fullstackio/books/master-custom-react-hooks-with-typescript/-/blob/production/course/code/lesson-5
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/eDz00W431xLjgxfEnvTyX7w02hbYzLkGAiZRlARUUoVHI.m3u8
---

Let's finally get started with the first functionality of your hook. To start, focus on being able to display and loop through an array of titles passed to the hook. First, allow your hook to accept a parameter `titles`, which is of type `string[]`, an array of strings.

```tsx
export const usePleaseStay = (titles: string[]) => {};
```

Next, you want the document title to animate when the tab has lost focus. Luckily, JavaScript provides a "visibilitychange" event that you can add a listener to. As soon as your hook mounts, begin listening for this event. Do this with `useEffect`, being sure to provide the empty dependency array so it fires on mount only:

```tsx
// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
}, []);
```

The first thing you notice is that TypeScript is complaining about the `document` types. You need to add `"dom"` to your `lib` array in `tsconfig.json`:

```json
{
  //...
  "lib": ["ess2015", "dom"]
  //...
}
```

It's also a best practice to remove listener functions whenever a React hook unmounts. This will prevent any sort of memory leaks from occurring in the case that whatever component calls usePleaseStay() is no longer rendered. This is possible within your useEffect hook, by returning a function from `useEffect`. Whatever is in this returned function is fired as part of the unmounting process. Use this to remove your event listener:

```tsx
// on mount of this hook, add the event listener. on unmount, remove it
useEffect(() => {
  document.addEventListener("visibilitychange", handleVisiblilityChange);
  return () => {
    document.removeEventListener("visibilitychange", handleVisiblilityChange);
  };
}, []);
```

Now you need to actually write your `handleVisibilityChange` function: 

```tsx
const handleVisibilityChange = () => {

}
```

When the value of `document.visibilityState` is _not_ `visible`, you should be iterating through the titles provided to your hook, otherwise you should stop toggling the titles. You can track whether or not you should be iterating through titles using a React state variable. Create a state value and setter pair using React's `useState` hook:

```tsx
const [shouldIterateTitles, setShouldIterateTitles] = useState(false);
```

Here, specify the default value as `false`, since you assume the hook mounts while the user is actually on your site.

Now you can write your `handleVisibilityChange` function, where the `shouldIterateTitles` value is quite literally when the document is not visible:

```tsx
// visibilitychange event handler
const handleVisiblilityChange = () => {
  setShouldIterateTitles(document.visibilityState !== "visible");
};
```

So, you now have a stateful variable that changes value when the visibility of the page changes. That's great! But you need to add functionality to actually modify the document title! For this, leverage JavaScript's `setInterval` function. However, you can't use `setInterval` right away. It's not the best idea to use `setInterval` directly with React hooks - like your document change function, you also need to account for cleanup for any intervals you set up to prevent memory leaks. This is a bit tricky to do in React, but it's definitely doable. Begin by writing a new custom React Hook `useInterval`:

Make a new file in the `hooks/` folder called `useInterval.ts`:

```shell
touch hooks/useInterval.ts
```

Within `useInterval.ts`, you can start scaffolding your custom hook. You'll need a function, called `callback`, type `() => void`, that you call, and then an `interval`, type `number` you want the function to fire at:

```tsx
export const useInterval = (callback: () => void, interval: number) => {};
```

So far so good. First, you'll need to store a reference to the callback function. Again, another React hook comes into play here - `useRef`:

```tsx
// Store the callback in a ref
const callbackRef = useRef(callback);
```

Along with `useRef`, you'll need to update the callback functions if it changes - another use case for `useEffect`:

```tsx
// Set callbackRef to the latest callback if callback changes
useEffect(() => {
  callbackRef.current = callback;
}, [callback]);
```

Finally within this hook you can get to using JavaScript's built-in `setInterval` function. Using another `useEffect` hook, whenever the interval value changes, call the current ref you have to the callback at the specified interval. As cleanup, remove this interval by calling `clearInterval` whenever this hook unmounts. Recall that cleanup tasks are written as a function returned from `useEffect`:

Chris Frewin

Let's finally get started with the first functionality of our hook.

To start, we'll focus on being able to display and looping through an array of

First, open up the use-please-stay file and ensure that that's the one in the

directory and not the one in the example folder.

Now, let's allow our hook to accept parameter titles, which will be type array

Next, we want the document title to animate when the tab has lost focus.

Luckily, JavaScript provides a visibility change event that we can add a

As soon as our hook mounts, we'll begin listening for this event.

We can do this with React's use-effect hook, being sure to provide the empty

We'll call the actual event listener function handle visibility change.

As I mentioned, since we only want this to run on mount, we'll pass an empty

Now, the first TypeScript error we have is that TypeScript cannot find the

document since we haven't included DOM in our lib compiler options.

So let's go to the TSconfig.json in our root and add the DOM library to the

It's also the best practice to remove listener functions whenever a React hook

This is possible within our use-effect hook by returning a function from use-

Whatever is in this returned function is fired as part of the un-mounting

We can use this function to remove our event listener.

So that's return, use an arrow function, and document.

Remove event listener, visibility change, and the same function handle

Now we need to actually write our handle visibility change function.

When the value of document.visibility state is not visible, we should be iter

Otherwise we should stop iterating through those titles.

We can track whether or not we should be iterating through these titles using a

Let's create a state variable and setter pair using React's use state hook.

I will call them should iterate titles and set should iterate titles.

And so our handle visibility change function becomes set should iterate titles

the value of document.visibility state and when it does not equal visible.

So we now have a state variable that changes when the visibility of the page

We need to add functionality to actually modify the document title.

For this we will leverage JavaScript's set interval function.

However, we can't use set interval right away.

It's not the best idea to use set interval directly with React hooks.

Like our document change function, we also need to account for cleanup and any

This is a bit tricky to do in React, but it's definitely doable.

Let's begin by writing a new custom React hook use interval.

So we'll make a new file right alongside use please stay called use interval.

So this will be export const use interval.

And for the parameters passed to this hook, we'll at least need a callback or

And the interval itself, which will be a number.

The first thing we'll do is store a reference to the callback that's passed in

We then need to make sure that every time callback changes, we're updating the

So once again, we require the use of use effect.

And whenever this callback changes, we're going to update the current value of

Finally, we can get to using JavaScript's built in set interval function.

And this one will fire whenever the interval changes.

So what we'll do is store the interval ID from set interval.

And as mentioned, the whole reason we're creating this custom hook is so we can

So just as we did in use please stay, we'll use the return function in use

And that can be done by calling JavaScript's built in clear interval function

We should also have a way to start and stop this set interval call from running

Let's add a parameter should run type Boolean to our hook.

We can add should run to the dependency array in our second use effect hook.

And when should run switches to false, we can simply return from this effect.

And we now have a react lifecycle safe way of using set interval.

Let's jump back into use please stay and start using use interval.