Here we have a component with a `useRef` hook, where a string is passed as the type argument, and null is passed as the runtime argument.

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

  // Why is this not allowed?
  ref.current = "Hello";

  return null;
};
```

However, there's an issue with assigning to the `current` property of the ref, as it's marked as read-only:

```markdown
Cannot assign to 'current' because it is a read-only property. 
```

## Challenge

Your task is to find out what's causing this issue, then change the line of code to make the ref mutable.

Inside of the type definitions, there are multiple declarations for the `useRef` hook that act like function overloads.

These are the different ways that `useRef` can be called, and they will return a different thing based on what you pass it in.

In the first overload, you pass in an `initialValue` and you get back a `MutableRefObject` with that thing in it:

```typescript
function useRef<T>(initialValue: T): MutableRefObject<T>; 
```

Back in our code, let's create a test `mutableRef`:

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

  const mutableRef = useRef<string>("123456")
```

Hovering over `mutableRef`, we'll see that it is typed as `React.MutableRefObject<string>`. We can also `CMD + Click` on the function in VS Code, it will go to the exact overload that it's using.

Now that we know which overload our `mutableRef` uses, let's `CMD + Click` on the `useRef` where we pass in `null`:

```typescript
const ref = useRef<string>(null); 
```

This version corresponds to the second overload, which returns a read-only `RefObject`. This is why we are getting our error!

## The Solution

In order to fix our error, we need to update the `useRef` call so it will go to the first overload. We can do this by removing the initial value:

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

  ref.current = "Hello";

  return null;
};
```

## Why the Strange Behavior?

The reason for the strange behavior with refs is due to the design decision made by the React team.

If you pass in an initial value or no value at all, you hit the first or third `useRef` overloads, respectively.

But when you pass `null` to `useRef`, you're telling React that you want it to manage the ref for you. This hits the second overload, which gives you with a read-only ref where you might have intended it to be mutable.

This is something to be aware of until this behavior is changed in future versions of React!

Targeting a useRef Overload

[0:00] Let's examine this. Let's dive into the types for useRef itself to see what's going on. There we go. Zoom out a little bit. One cool thing, you notice that there are multiple declarations for useRef. These act as function overloads. These are different ways that useRef can be called and it will return a different thing based on what you pass it in.  
  
[0:22] You can see here that we have an initial value. The firstOverload is it has useRef. You pass in the initial value and you get back a MutableRefObject with that thing in. If we were to do that, if we just say const mutableRef equals useRef, we'll pass it a string, and then we'll pass it also a string inside here. I'll just group these together so we can see them.  
  
[0:47] This mutableRef now, you see we're getting back React.MutableRefObject string. A cool tip here is that if you're using a certain overload, then you can command-click on the function and it will go to the exact overload that you're using. This one, we've triggered the firstOverload. Command-click that again just to show you. Command-click, firstOverload, very nice.  
  
[1:09] Over here, let's see which overload we're using here. Command-click there, and we're on the secondOverload. Interesting. Let's see if we can trigger the final overload. The final overload doesn't require any parameters at all. This overload is only triggered when you use an empty, when you don't pass anything to it.  
  
[1:29] Let's do that. Let's go thirdOverload. In fact, let me just group these properly. This is firstOverload. That's the secondOverload. This is the thirdOverload. The thirdOverload is when you don't pass anything. Let's command-click that and check. There we go. We're on the thirdOverload. Very cool.  
  
[1:52] Why am I pointing this out? If we look at the firstOverload and what it returns, then you'll see that we get a MutableRefObject. Let's just command-click there, take a look at this type MutableRefObject. This is just current T. You notice that it doesn't have readonly in front of it. In other words, this can be mutated.  
  
[2:14] Let's just check here. I do not want to save my changes that I did there. Let's check here. Let's go firstOverload.current equals blah, blah, blah. Absolutely fine. You notice on the secondOverload, if we try to do that, it's giving us an error. That's because secondOverload is a RefObject.  
  
[2:31] RefObject, if we take a look at it, is a readonly current or . This means then that what we're getting here is that we can't assign to it because it's readonly. Then the thirdOverload, just for completeness, we can see that this also returns a MutableRefObject with T or undefined.  
  
[2:55] Why does this one return a readonly ref? It's because if you pass in  here, what they decided to do on the type level -- It's a strange decision but I do have to explain it because it makes sense but doesn't -- they decided that when you do use this  thing here, you're saying to React, "I want you to manage this ref for me. I don't want to manage this ref."  
  
[3:25] If you were to pass in undefined instead, it won't work here because you have to pass in an initial value here. If you choose to either pass in, let's say, this or you don't pass in anything at all, then you hit the thirdOverload or the firstOverload. If you pass in , then you hit the magical secondOverload and you end up with a readonly ref where you intended it to be mutable.  
  
[3:55] This is just something you've got to learn until they get rid of this behavior, hopefully, in React 19. The thing you've got to learn is to look at these two cases where you either pass in this string up here or pass in the initial value or don't pass in the initial value or you pass in . If you pass in , you're saying to React, "I want you to manage this state for me or manage this ref for me."  
  
[4:23] There we go, a primer on ref on why it's weird. I hope that someday I can delete this video and you can delete this knowledge from out of your brains because this will have gone away. It's certainly one of the most annoying things about React and TypeScript working together.

Making a Read-Only Ref Mutable

[0:00] In this exercise, we're inside a Component. We have a useRef here, where we're passing in string as the type argument, and we're also passing in  as the runtime argument.  
  
[0:11] What's going on here? We should be able to assign to this, shouldn't we? If you hover over this, it's saying, "Cannot assign to 'current' because it is a read-only property."  
  
[0:21] Your job is to figure out what's going on here and how we can change this line of code to make sure that this ref is not read-only, that it's mutable. 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

Specify the Initial Value with useRef

useRef with HTML Elements

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

Transcript

Making a Read-Only Ref Mutable

Transcript