Consider this `useTimeout` hook that takes in a time in milliseconds:

```typescript
export const useTimeout = (timerMs: number) => {
  useEffect(
    () =>
      setTimeout(() => {
        console.log("Done!");
      }, timerMs),
    [timerMs],
  );
};
```

It's using a `useEffect` with a function that returns the result of `setTimeout`.

However we have an error:

```typescript
Type 'Timeout' is not assignable to type 'void | Destructor' 
```

## Challenge

Your job is to figure out how to clear the timeout and make this error go away.

The useEffect Hook isn't generic, so you need to follow its API to use it properly.

Here's the error message we had:

```typescript
Type 'Timeout' is not assignable to type 'void | Destructor' 
```

To understand what it means, let's take a look at the `useEffect` function to see what `Destructor` means.

## Examining `useEffect`'s Types

Use the `CMD + Click` shortcut on the `useEffect` function to explore its types.

It has two main parts: `effect: EffectCallback` and `deps: DependencyList`:

```typescript
// inside node_modules/@types/react/index.d.ts
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
```

These kinds of types tend to use aliases, so we can `CMD + Click` to do some further exploring.

The `DependencyList` type, which is a read-only array of unknown. This means that any array can be passed into it:

```typescript
type DependencyList = ReadonlyArray<unknown>; 
```

The `EffectCallback` type is a function with no arguments that can either return `void` (nothing) or a `Destructor`.

```typescript
type EffectCallback = () => (void | Destructor); 
```

Then the `Destructor` is a function that also returns `void`:

```typescript
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; 
```

I'm not sure what `UNDEFINED_VOID_ONLY` does, but the important point here is that the `Destructor` returns void.

## Fixing the Error

Let's go back to our starting point code that had the error:

```typescript
export const useTimeout = (timerMs: number) => {
  useEffect(
    () =>
      setTimeout(() => {
        console.log("Done!");
      }, timerMs),
    [timerMs],
  );
};
```

We know that the `useEffect` is expecting to either return `void` or another function.

Let's make it return `void` for now by having it return an empty function:

```typescript
export const useTimeout = (timerMs: number) => {
  useEffect(
    () =>
      setTimeout(() => {
        console.log("Done!");
      }, timerMs),
    [timerMs],
  );
};
```

Now we can focus on the timeout.

We know that when using `setTimeout`, we'll eventually want to clear it to avoid having multiple timeouts running.

Create a `timeout` constant and assign it to the `setTimeout`. Then inside of the `EffectCallback` we'll return `clearTimeout(timeout)`.

```typescript
export const useTimeout = (timerMs: number) => {
  useEffect(() => {
    const timeout = setTimeout(() => {
      console.log("Done!");
    }, timerMs);

    return () => {
      clearTimeout(timeout);
    };
  }, [timerMs]);
};
```

Now our error is gone, and the `useTimeout` hook will work as expected!

This exercise served as an introduction to the `useEffect` API and show what it will accept and what it won't accept. This is one of the rare hooks in React that isn't generic.

Understanding its API and the types it uses will help you better work with effects and dependency lists in React.

Properly use the useEffect API

[0:00] Let's break down this error first. What's happening here is Type Timeout is not assignable to type void or Destructor. Let's actually take a look at useEffect itself to see what Destructor means.  
  
[0:12] We command-click into here. You can see that we've got a function inside here that says, "useEffect" and "effect EffectCallback" and "deps DependencyList." The way that these types tend to work is they tend to use aliases for a lot of different things.  
  
[0:28] If we command-click, look at DependencyList, then we can see it's a ReadonlyArray of unknown. Basically, any array can be passed into here. That's good.  
  
[0:38] Next, we want to look at the EffectCallback. EffectCallback is the thing that you're passing into the first argument of useEffect. Let's command-click to there. This is basically a function which has no arguments and can either return void, so nothing, or it can return a Destructor. A Destructor looks like this. We have a function that also returns void.  
  
[1:00] I'm actually not sure what this UNDEFINED_VOID_ONLY never...I'm really intrigued by that. I'm actually not sure what it does, but we have a Destructor type here. That means that this Destructor type, if we look at this, this function is expecting to return either void or another function.  
  
[1:18] Let's just make it return void for now. Let's wrap it in some curly braces. Now, our type error goes away. If we don't return anything from here, then it's actually going to be quite happy.  
  
[1:28] The thing we can return...We can't return a number, for instance. We definitely can't retrurn it. We can't return a number because it's expecting it to be an EffectCallback or void. An EffectCallback looks like this.  
  
[1:42] Now, everything's happy. Now, we can start to think, "OK. What is it that we actually want to do with this timeout?" We know that when you set a timeout, you will eventually want to clear it because if you don't clear it, you're just going to have oodles of these timeouts running.  
  
[1:57] What we can do, we can say, "const timeout = setTimeout." Then, inside the EffectCallback, we can return clearTimeout timeout. This is just a way to introduce you to the basics of useEffect's API and also show what it will accept and what it won't accept.  
  
[2:13] useEffect is one of the rare hooks in React that isn't generic. I just wanted to add this in here so that you can understand the kind of language it uses in its API when it's describing effect and useEffect and the DependencyList.

Solving Errors with useEffect

[0:00] In this exercise, I'm giving you a TypeScript error to solve. This useTimeout hook is a little bit immature. It's using useEffect. We've got this setTimeout function here. What it's doing is it's taking in the timer milliseconds. We're getting an error here.  
  
[0:19] We are passing, as the first argument to useEffect, a function that returns the result of setTimeout, but it looks like Type Timeout is not assignable to type void or Destructor.  
  
[0:32] Your job is to figure out what's going on here, how we can make this error go away. We also probably need to clear the timeout at some point. Otherwise, it's going to change every time or rerun every time that the timerMs changes. There's a few little jobs here. See if you can find your way to making this hook work and to making this TypeScript error go away. Good luck.

TypeScript's features and developer experience make a great combination with React, but it can be confusing to get started.

What’s the best way to type component props? What are these weird `useRef` errors?

That's where this React with TypeScript tutorial comes in!

Starting from the very beginning of bringing TS support to a React project, you'll soon find yourself properly typing hooks and mastering components. You’ll learn everything you need to know to get productive with React and TypeScript.

Tutorial topics include:

* Reading React's type definitions to debug errors and ensure correct usage
* Defining props for custom and `React.FC` function components.
* Putting TypeScript's inference to work for you
* Supporting component children
* Typing and overriding event handlers
* Utilizing `ComponentProps` to extract properties from imported components or HTML DOM elements
* Understanding the APIs and typing for `useState`, `useCallback`, `useEffect`, and other React Hooks. By the end of this workshop, you'll be confident when using React with TypeScript in your own projects!

<Testimonial author={{name: "Francisko de Moraes Rezende", image: "https://cdn.sanity.io/images/z9io1e0u/production/8e2b0b48599527885121568e19c761edd1c3e2ee-460x460.jpg"}}>Went through it and I think it's great! I wish this tutorial existed when I started my first gig 11 months ago. It teaches all the things I use on a daily basis and some that I didn't know; I was using the verbose way of getting HTML props in types until I went through the tutorial. This is my new go-to recommendation for people starting to work with TS+React. Thanks for creating this and making it free, Matt.</Testimonial>

## Instructions

This React with TypeScript tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.

You'll need to:

* Watch and read the problem introduction.
* Check out the TypeScript or React documentation or dive into type definitions to look for help
* Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.

## Prerequisites

You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the <a href="https://www.totaltypescript.com/tutorials/beginners-typescript" target="_blank" rel="noopener">Beginner's TypeScript Tutorial</a> is recommended.

## Running the Exercises

Exercises can be worked on using the inline Stackblitz editor, or by <a href="https://gitpod.io/#https://github.com/total-typescript/react-typescript-tutorial" target="_blank" rel="noopener">opening the tutorial repo in Gitpod</a>. Online editors do not support the full feature set of a local VS Code installation (e.g. quickly jumping to type definitions).

To work locally, clone the <a href="https://github.com/total-typescript/react-typescript-tutorial" target="_blank" rel="noopener">React with TypeScript Tutorial repo</a>, and use a package manager to install dependencies. From there, check out the README for further instructions.

Get productive building applications with React and TypeScript with our interactive guide on React's types - from component props to useRef.

React TypeScript Tutorial 

There are a few steps to follow in order to add React to a TypeScript project.

Adding React to a TypeScript Project

Most frontend frameworks include optional TypeScript support, meaning you won't have to manually set it up.

TypeScript in React Frameworks

VS Code has a variety of features for working around your codebase when writing JSX.

Three Helpful Tools for Writing JSX

Navigating JSX Types

Introduction

It's important to understand how to type props since you'll work with them every day in React.

Four Approaches to Typing Props

Ensure Props are Present and Defined

React's Function Component React.FC has its own considerations for enabling proper type checking.

Specifying Props for React.FC 

Typing a Component as a Function

Many teams type React's children as any, but there is a better option.

Typing React's Children

Solving the any Problem with Children

Instead of guessing a handler's type, you should be specific.

Choose the Correct Event Handler Type

Typing Event Handlers

When building React components, there are a couple of options for proper typing based on the underlying HTML element.

Add HTML Props to React Components

Using HTML Props in React Components

Components can have a lot of built-in props for things like event handlers that you don't always want, but there are a few techniques for overriding them.

Techniques for Overriding Native Props

Overriding and Removing Component Props 

Use a Type Helper to Extract Component Props

Extracting Props from Custom Components

Components

It's common for the useState hook to be called with an empty array, which TypeScript has issues inferring. Follow this approach for proper typing.

Fix useState's never[] Error

Properly Typing useState

The useState hook uses function overloads to handle cases where you may or may not want to pass an intial value.

Specifying types for useState

Typing useState with undefined

There's a strange property of the useState API that TypeScript treats in a specific way.

Going from Function Comparisons to Object Comparisons

Calling useState with Excess Properties

By examining a function's type definitions, you can properly type React's useCallBack Hook

Have TypeScript Infer the Callback Function Type

Typing the useCallback Hook

Not all hooks use the same type signature. Dive in to fix errors and specify the return type of a memoized value.

Specify or Infer useMemo's Return Type

Typing the useMemo Hook

There are three type definitions for useRef. Let's start by looking at the most basic.

Typing the useRef Hook

Basic useRef Typing

There are a few different ways to use refs in React, along with some rules to follow.

Refs in React

Specify the Initial Value with useRef

useRef with HTML Elements

Targeting a useRef Overload

Making a Read-Only Ref Mutable

Leveraging one of TypeScript's built-in features allows you to specifically type the state and actions for a reducer function in React.

Transcript

Solving Errors with useEffect

Transcript