In this exercise, we have a similar situation to the one we just saw.

We have a function called `fetchData` where we're fetching data that has `id: 1` and `name: John`.

```typescript
const fetchData = () => {
  return Promise.resolve({ id: 1, name: "John" });
};
```

Inside this `Component`, we use a `useEffect` to fetch the data and set it to our new state.

```typescript
export const Component = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetchData().then((val) => {
      setData(val);
    });
  }, []);

  type test = [Expect<Equal<typeof data, Data | undefined>>];
};

```

However, instead of being inferred as `never[]` like we saw last time, `data` is being inferred as `undefined`.

```typescript
// hovering over `data`
const [data, setData] = useState();

// shows
const data: undefined
```

## Challenge

Your job is to figure out how to make `data` be typed as `Data` or `undefined` so the test passes.

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

As we saw in the last exercise, we can pass the `Data` type into `useState`:

```typescript
export const Component = () => {
  const [data, setData] = useState<Data>();
```

If we aren't passing in an initial value, we can simply pass a type argument.

This means that `data` will be inferred as `Data` or `undefined`, so our test passes.

If we try to pass something else to `useState` like `null`, it won't be allowed.

```typescript
// Error under `null`
const [data, setData] = useState<Data>(null);

Argument of type 'null' is not assignable to parameter 'Data | (() => Data)'
```

## An Alternative Solution

An alternative way to solve this challenge is to pass `Data` or `undefined` in the type arguments, and then manually pass in `undefined`:

```typescript
const [data, setData] = useState<Data | undefined>(undefined); 
```

This pattern would be useful if you wanted to explicitly allow `null` as a type:

```typescript
const [data, setData] = useState<Data | null>(null); 
```

This is slightly different from functions that you might have seen before– the `useState` hook uses function overloads to handle cases where you might want to pass in an initial value or not.

If we do pass in an initial value to `useState` it will be inferred as just `Data`. It won't be `Data | undefined`:

```typescript
const [data, setData] = useState<Data>({
  id: 123,
  name: 'Matt'
});
```

The `useState` hook makes our lives easier, but it can be confusing to understand what TypeScript is doing with it!

Specifying types for useState

[0:00] As you might have figured out from last time, we can pass in data into useState here. What this is going to do is -- it's interesting -- because we're not passing something initial into here, we can actually just pass in a type argument. Then data will be inferred as Data or undefined.  
  
[0:20] If I pass something inside here...Let's say I want it to be Data or null, for instance. Then this is actually not going to be allowed because when we specify Data inside here, the only thing we can pass in is Data itself, like the actual thing that we specify. We'd have to do id 123 name Matt.  
  
[0:42] This means then that this will work. This is an alternative way. If you want this to be Data or undefined or T or undefined, the thing you pass in or undefined, then you can just pass in nothing here.  
  
[0:53] Though the other way to do this, actually, if you want to be more specific -- I'm not sure whether this is better or not, but it's an alternative way of achieving the same effect -- is you can actually do Data or undefined in the type argument and then pass in undefined manually.  
  
[1:09] You can also do this if you want to, Data or undefined. This is useful if you want to explicitly use null as your type. You have Data or null inside there.  
  
[1:20] This is slightly different from functions that you might have seen before, which is useState uses a couple of what I'd call function overloads to basically get around the fact that sometimes you want to pass in stuff and sometimes you don't want to pass it in an initial value.  
  
[1:35] Of course, if we do pass in our initial value, blah, blah, blah and then name Matt, then that's going to be inferred as basically just Data here. It's not going to be Data or undefined because we're passing in this initial value.  
  
[1:48] We're go. This is a good demonstration of what useState does to try to make your life just a little bit easier. Sometimes it can be confusing when you're looking at it and you're going, "What is TypeScript doing here?"

Typing useState with undefined

[0:00] In this exercise, we have a sort of similar situation to the previous exercise but a little bit different. We have a function called fetchData, where we're fetching some data that has id 1 and name John, which, coincidentally, is the same as this Data interface just here.  
  
[0:14] What we want to do is, inside this component, in a useEffect, which is not the best way to be doing data fetching...For this example, it will do. What we do inside this useEffect when the component mounts, we do fetchData. Then we set the data that gets returned into our useState.  
  
[0:31] Except we've got a sort of similar problem to last time, which is data doesn't know what it's supposed to be. In this case, instead of a never array, it's being inferred as undefined. Hmm.  
  
[0:42] Your job here is to try to figure out how to make that into Data or undefined, because we can't pass in an initial value here to let TypeScript infer. What's happening is we're just getting undefined being inferred in this slot. Your job is to work out how to make this work and the best way to do it. 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

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

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

Typing useState with undefined

Transcript