In this exercise, we are going to look at an issue with the `useCallback` function.

Here's our current code:

```typescript
export const Buttons = (props: { id: string }) => {
  const onClick = useCallback<string>(
    (buttonName) => {
      console.log(props.id, buttonName);
    },
    [props.id],
  );

  type test = Expect<Equal<typeof onClick, (buttonName: string) => void>>;

  return (
    <div>
      <button onClick={() => onClick("A")}>A</button>
      <button onClick={() => onClick("B")}>B</button>
      <button onClick={() => onClick("C")}>C</button>
    </div>
  );
};
```

As seen in the test, we want the `buttonName` to be a `string`, and it should return `void`.

However, the `buttonName` is currently implicitly typed as `any`.

## Challenge

Your task is to figure out what's going on with typing `useCallback`, and update the code so the test passes as expected.

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

Like before, let's start by diving into `useCallback` with `CMD + Click`:

## Looking at `useCallback`

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

function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
```

We can see that `useCallback` accepts a function `T` and a dependency list, and ultimately returns the function you pass in.

So we know that the type argument to `useCallback` has to be a function.

## Fixing the Error

For our exercise's starting point code, `useCallback` is being called with a string because it looks like that string will be used for the name.

However, this gives us an error that `Type 'string' does not satisfy the constraint 'Function'`:

```typescript
// error on `string`
export const Buttons = (props: { id: string }) => {
  const onClick = useCallback<string>(
    ...
```

Let's remove the type argument from `useCallback`:

```typescript
export const Buttons = (props: { id: string }) => {
  const onClick = useCallback(
    (buttonName) => {
      console.log(props.id, buttonName);
    },
    [props.id]
  );
```

Now when we hover over `useCallback`, we can see that it's inferring its type argument as a function that takes a `buttonName` string as a parameter, and returns `void`.

```typescript
// hovering over useCallback
(alias) useCallback<(buttonName: any) => void>(callback: (buttonName: any) => void), deps:React.DependencyList): (buttonName: any) => void
```

This is already close, but we want the `buttonName` to be a string instead of `any`.

We can add the type to `buttonName` in the callback:

```typescript
export const Buttons = (props: { id: string }) => {
  const onClick = useCallback(
    (buttonName: string) => {
      console.log(props.id, buttonName);
    },
    [props.id]
  );
```

Now the test passes!

## Relying on Type Inference

It's important to rely on TypeScript's type inference when using `useCallback`.

In our example, we can simply pass the `buttonName: string` as a parameter in the callback, and TypeScript will automatically infer the correct type for the function.

This approach is much cleaner and easier to read than manually specifying the type of the function passed to `useCallback`.

Have TypeScript Infer the Callback Function Type

[0:01] To figure out the solution here, we're going to dive into useCallback itself. Let's come onClick and see what's going on inside useCallback. We can see that T inside here, this is the thing that it's inferring. This is the thing that gets passed into the type argument.  
  
[0:15] We're saying this has to be a function and this function is something that's global in TypeScript. This isn't something that comes from React. It's saying, any function can be passed in here. Nice.  
  
[0:29] That T then, well, they could call it T function, but they call it T, gets passed into the callback. We've got a DependencyList here and then it returns the function that you pass in. The thing that's in the type argument here needs to be a function.  
  
[0:44] The thing that we're passing in here, "Type 'string' does not satisfy the constraint 'Function'." We're trying to say inside here that we're passing it a string, so the buttonName needs to be a string. This is a fairly common issue that I see when people don't understand how these callbacks behave, and certainly how the type arguments reinferred.  
  
[1:03] If I remove this, then what does useCallback suddenly get here? We hover over this. We can see that useCallback now, the type argument is being inferred as (buttonName: any) => void. We're super duper close already, because we're expecting this to be (buttonName: string) => void.  
  
[1:22] If we type this as a string, what happens? It works. Beautiful. Now, useCallback is being passed in as (buttonName: string) and returns void. We return something from here, we return a number, let's say. Now, onClick will be slightly different. It's now a (buttonName: string) that returns 124123. That's pretty cool.  
  
[1:44] What we're seeing here is that useCallback takes in the function that's passed in, infers its types, and then uses that as the thing that gets returned. That's really nice to think about.  
  
[1:55] We could do this in an alternate way too. We could say that buttonName inside here. We pass this in as a (buttonName: string) and then return void. Now, it's working, even though we're internally returning a different return type.  
  
[2:11] That's because technically you can pass a number to void. It doesn't really matter what it does, because if you pass void, the consuming function of the thing calling your function isn't expecting to do anything with it.  
  
[2:24] That's an alternate way that you can do this, but it's much cleaner if you rely on the inference and you pass (buttonName: string) inside here. This should give you a good idea of what useCallback demands from you when you use it from a TypeScript standpoint.

Typing the useCallback Hook

[0:00] In this exercise, we're going to look at useCallback. UseCallback here, we're trying to do something a bit funny with it, which is we're saying useCallback, we're passing in a string, and we're expecting this buttonName here to be a string. In fact, it implicitly has an any type.  
  
[0:16] OK, this is a little bit intriguing. We're basically saying useCallback should take in a buttonName as its type, and it should return nothing, so it should return void. That's what this test is doing. It's expecting that onClick here is Equal typeof onClick, buttonName, string, void. Currently, it's just being typed as string.  
  
[0:37] Your job here is to figure out what's going on, how we can alter this typing here to make sure it works, because something's definitely going wrong here.

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

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 the useCallback Hook

Transcript