In this exercise, we have an error while trying to use `useRef` with a typed `HTMLDivElement`.

We are trying to pass the `ref` directly into a `div`:

```typescript
export const Component = () => {
  const ref = useRef<HTMLDivElement>();

  // error over `ref`
  return <div ref={ref} />;
};
```

However, we're faced with a rather unfriendly error:

```
Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'... 
```

## Challenge

Your challenge is to figure out what's going on here, why these errors are occurring, and what we can do to fix it.

You will need to make a small runtime change to the code. This might not feel very intuitive at first, but it's essential for resolving the error!

Like we've done before, we'll start by `CMD + Click`ing into `useRef` to check its type definitions.

When we call `useRef` with no arguments, it returns a `MutableRefObject` with a type of `T` or `undefined`.

```typescript
function useRef<T = undefined>(): MutableRefObject<T | undefined>; 
```

In other words, `undefined` is going to be part of the union.

Back in our code, if we write `ref.current` then hover over it, it will be either `HTMLDivElement` or `undefined`.

```typescript
export const Component = () => {
  const ref = useRef<HTMLDivElement>();

  // hovering shows `HTMLDivElement | undefined`
  ref.current

  return <div ref={ref} />;
};
```

Remember, refs can be `null` but they can't be undefined.

### The Solution

To fix this issue, we need to pass `null` as the initial value when calling `useRef`.

```typescript
export const Component = () => {
  const ref = useRef<HTMLDivElement>(null);

  return <div ref={ref} />;
};
```

Without the initial value, JavaScript will default it to `undefined`, which is why we need to specify `null`.

You should also be sure to use the correct element type when calling `useRef`. If you're unsure which element type to use, you can hover over the error messages or the component itself to see the expected type.

The React team is aware of the inconvenience caused by this typing behavior.

It's another example of why `null` was such a massive, costly mistake in JavaScript!

Specify the Initial Value with useRef

[0:00] Let's examine why this is happening. If we command-click into useRef, we can see that by default here, T is undefined. This type is undefined. What's happening is that when we call useRef with nothing inside here, then whatever we put as the type argument is going to return it in a MutableRefObject with T or undefined. In other words, undefined is going to be part of this union.  
  
[0:28] This ref now, if we look at ref.current, ref.current is going to be HTMLDivElement or undefined. Undefined, as we saw in the previous explainer, you can't pass that into this current piece here. This current ref.current, imagine if we pass undefined here, that's not going to be happy. It's exactly the same because ref.current might be undefined.  
  
[0:56] The reason it's undefined is that when we initially do this, this thing here, is that if you don't pass in an argument here, then JavaScript will default it to undefined. We need to match what React is setting the runtime value to.  
  
[1:15] Let me just readjust this. We need to put  into here. Now this is something that's pretty contentious. It's something that I've personally spoken to Sebastian Silbermann about from the React team to try and get this typing changed.  
  
[1:32] Because it's pretty not very ergonomic at all, this useRef passing in  manually in order to match React's concept of what the proper nullish value should be between  or undefined is just another example about why  was such a massive costly mistake.  
  
[1:53] This is how you handle the typing refs that you need to pass into DOM elements here. Use useRef passing in the correct elements. Of course, if I put in the wrong one here, like HTMLSpanElement, this is going to be incompatible. It has to be the right element. Then you stick in  here.  
  
[2:13] If you're ever not sure which element to pick, then you can hover over this and you'll be able to see HTMLDivElement just right there. If, for instance, we do audio instead, then this will need to be HTMLAudioElement. There we go. Copy from there. It's going to be plastered all over the error messages that you're getting there, as well as the hovers there, too.  
  
[2:34] This is the pattern that you'll need to fall into if you want to use useRef passing it into DOM elements.

useRef with HTML Elements

[0:00] Let's use the knowledge that we just gained in the previous explainer and look at this example. We have a useRef here, which is an HTML development, so we're typing it as that, and we're trying to pass that ref directly into this div here.  
  
[0:16] It's got a big old error here, and this is a very, very unfriendly error. We've got MutableRefObject, LegacyRef, RefObject, undefined is not assignable to type HTML development or .  
  
[0:32] Your job here is to figure out what is going on here, why these errors are occurring, and what we can do to fix it. You will need to make a small runtime change to this, and it's not going to feel very intuitive. 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

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

Properly use the useEffect API

Solving Errors with useEffect

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

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

useRef with HTML Elements

Transcript