Here have our `Button` component again, but this time we're returning an object with some random stuff:

```typescript
interface Props {
  className: string;
}

/* @ts-expect-error */
export const Button = (props: Props) => {
  return {
    ohDear: "123",
  };
};

const Parent = () => {
  return (
    <>
      <Button className="my-class"></Button>
    </>
  );
};
```

We have an error inside the `Parent` saying that the `Button`'s return type `ohDear: string` is not a valid JSX element.

This means we can't use this as a component, even though it's properly named, and includes props and the `className`.

## Challenge

Instead of having the component error spill out in the rest of my application, the goal is to catch it where it happens. If the `Button` is not returning the right stuff, it should show us the error.

Your job is to find some type declaration that will make that happen.

As a hint, it needs to replace the `unknown` here:

```typescript
export const Button: unknown = (props: Props) => {
  ...
```

For help, check out the following resources:

<a href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/" target="_blank" rel="noopener">Typing Function Components in React</a>

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

The solution is to apply a type definition of `React.FC` to the `Button`.

This represents a React function component.

```typescript
/* @ts-expect-error */
export const Button: React.FC = (props: Props) => {
  return {
    ohDear: "123",
  };
};
```

Removing the `@ts-expect-error` will show us several errors that complain about the object with `ohDear: string` not being allowed to be returned.

```typescript
Type '(props: {}) => { ohDear: string; }' is not assignable to type 'FC<{}>'

Type '{ ohDear: string; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key
```

## Changing the Return

Changing the return to `<div></div>` or `null` will remove the error from the `Button` component since they are valid React elements, but now there's an error in the `Parent` component under the `className`:

```typescript
export const Button: React.FC = (props: Props) => {
  return {
    ohDear: "123",
  };
};

const Parent = () => {
  return (
    <>
      <Button className="my-class"></Button>
      // error under className
    </>
  );
};
```

We get this error because `React.FC` by default doesn't contain any `props`, and it doesn't let you pass any `props` in.

## Adding Props to `React.FC`

In order to tell `React.FC` to receive some `props`, we can pass in a type argument.

```typescript
export const Button: React.FC<Props> = (props: Props) => {
  ...
```

Hovering over `React.FC` to jump to its type definition, we can see it's got a single letter `P` that indicates that it takes some `props` and defaults to an empty object:

```typescript
// inside node_modules/@types/react/index.d.ts

type FC<P = {}> = FunctionComponent<P>;
```

Then the `FunctionComponent` shows us that is has to return a React element:

```typescript
interface FunctionComponent<P = {}> {
  (props: P, context? any): ReactElement<any, any> | null;
  ...
```

Weirdly enough, we can pass anything in here, which might not be ideal. For example, `props` could even be a string.

It also has some other attributes on it like `propTypes`, `defaultProps`, and `displayName`.

While some of these might end up falling out of favor or becoming deprecated, it's important to know about `React.FC`.

I wouldn't refactor it out of a codebase if it's been consistently put in over time, and you're probably going to see it in the wild.

Specifying Props for React.FC 

[0:00] The solution here is to apply a type definition of React.FC to this button. I'm going to remove this ts-expect-error just so we can see the errors coming up. What's happening here is that we have React.FC, which represents a React function component. There's two things it's going to do.  
  
[0:26] Let's actually just remove these props for now. The first thing it's going to do is it's going to yell at me because oh dear string is missing the following property from type ReactElement. Basically saying that you can't return this from a component. If instead, I return something more reasonable like return <div> or something, then it's going to be quiet. It's going to chill.  
  
[0:46] If I return  again, which is a valid ReactElement, then it's going to relax. There's an issue here, which is now className does not exist on type IntrinsicAttributes. Oh, dear. Props is actually being typed as this empty object here.  
  
[1:04] If I try to do props, props here, then this is going to yell at me because React.FC by default doesn't contain any props. It doesn't let you parse any props. How do we tell React.FC to receive some props to tell it that it's propful. That's not a word.  
  
[1:20] React.FC, we can actually parse it a type argument. If you comment on this or, sorry, hover over it like that, we can actually go to the type definition. It's got this single letter P, which indicates that it takes some props. They defaulted to an empty object. Weirdly, we can actually parse anything in here, which is gross. Props can actually be a string. This should probably be constrained to an object.  
  
[1:47] React.FC props equals props. Then we can actually get all of our inference working beautifully. If we try to return something stupid, it's going to warn us on the correct line. React.FC is a really useful little bit of kit. If we find in definition on it, command-click into it, we can see that the main signature of it is a props. It's also got some context on it funnily enough for legacy reasons.  
  
[2:16] Then it's got to return a ReactElement. It also has some other attributes on it, like prop types, default props, and display name. If we take a look at that because we've used React.FC, we can actually get autocomplete on these things. If we're using default props, for instance, then this is going to need to be a partial of props.  
  
[2:35] If you're using default props like this, then you can do that. Default props I think is going to be deprecated. React.FC, in my eyes, is losing utility over time. I'm using it less and less. Really, I would probably just say that this is a little bit more ergonomic, just saying props, props like that, how can you beat that in terms of succinctness and conciseness?  
  
[3:03] You do need to know about this because you'll probably see lots of code bases where this is written. I wouldn't refactor this out of the code base if it's been consistently put in over time. React.FC, it's a useful tool in your toolkit. You're probably going to see it in the wild.

Typing a Component as a Function

[0:00] In this exercise, we have our button component again. Here, we're doing something a little bit silly inside our button component, which is we're returning an object with some random stuff in here.  
  
[0:12] This button down the bottom is saying, "It's return type '{ ohDear: string; }' is not a valid JSX element. We can't use this as a component, even though it's properly named and stuff. It's props are Props and the className is working nicely.  
  
[0:29] What I would love to have is instead of having the error spill out in the rest of my application, I would love to be able to catch this here, at this component, at this line. I would love to say, if my button here is not returning the right stuff, I want to see an error there.  
  
[0:46] Your job is to find some type declaration that I can use to make that happen. I'll give you a clue. It's got to be here. It's got to be at this spot, SomeDefinition. That's got to work then. That's your job is to try and find it.  
  
[1:01] I will have some links below that you can check out and see some stuff here, because React has some built in typings that are going to help. That's your job. I think, I've given you everything I want to. Yes, 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

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

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 a Component as a Function

Transcript