In this exercise, we're going to explore `useMemo` to understand what it's doing.

Here we have a `useMemo` function that takes in a function returning an array and a dependency array, similar to what we've seen with `useEffect` and `useCallback`:

```typescript
export const Component = () => {
  const autoGeneratedIds = useMemo<() => string[]>(() => {
    // generate 100 random string uuid's
    return Array.from({ length: 100 }, () =>
      Math.random().toString(36).substr(2, 9)
    );
  }, []);

  type test = Expect<Equal<typeof autoGeneratedIds, string[]>>;
};
```

The goal of this code is to generate 100 random UUID strings and ensure that this operation is only performed once when the component is initiated.

However, instead of getting back an array of strings, we're getting back a function that returns an array of strings.

## Challenge

Your challenge is to investigate the issue by diving into the type signature of `useMemo` to understand its actual API in terms of types.

Update the code based on what you find so the test passes as expected.

Not all hooks use the same type signature. Dive in to fix errors and specify the return type of a memoized value.

## Fixing useMemo Typing Issues

In the starting code for this exercise, we're passing `useMemo` a function that returns an array of strings as a type argument. This is what we needed to do with `useCallback`, but it's incorrect in this situation.

```typescript
const autoGeneratedIds = useMemo<() => string[]>(() => {
  ...
```

## Understanding `useMemo`'s Typing

Using `CMD + Click` to look at the definition of `useMemo`, we can see that it takes a factory function with no parameters that returns a type of `T`:

```typescript
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; 
```

This `T` is then returned by `useMemo` itself.

## Updating our `useMemo`

If we completely remove the type argument from `useMemo`, TypeScript will infer the correct type:

```javascript
const autoGeneratedIds = useMemo(() => { 
  ... 
```

Now, when we hover over `useMemo`, we can see that it correctly infers the type as an array of whatever is returned inside the function.

The random UUIDs are strings, but if we have the function return an array `[1, 2, 3]`, TypeScript will show `useMemo` returns an array of numbers.

## Alternative Solutions

If you have a function where you want to ensure the correct return type, you can specify it in the type argument manually:

```typescript
const autoGeneratedIds = useMemo<string[]>(() => { 
  ... 
```

For a third option, you could specify the return type of the function passed to `useMemo`:

```typescript
const autoGeneratedIds = useMemo((): string => { 
  ... 
```

When using `useMemo`, it's best to either leave the type argument off and let TypeScript infer the type like we did in the first solution, or to type the return type manually like the third option if necessary for your situation.

Specify or Infer useMemo's Return Type

[0:00] OK, let's take a look. This useMemo here, basically we're passing in a function that returns an array of strings here into this type argument. This is what we needed to do in the callback situation, but here it's actually incorrect.  
  
[0:15] If we cmd + click into useMemo itself, we can see that this factory here, this is the first argument. This is a function with no parameters that returns T. That T, the thing that we return from this factory, is the thing that gets put into the type argument there, and that, then, gets returned from useMemo itself.  
  
[0:36] If we take a look at that, if we remove this type argument, you notice that the errors go away completely. If we hover over useMemo, you can see that it's inferring string array in that slot.  
  
[0:48] If we instead just return an array of numbers, so return 1, 2, 3, for instance, then autoGeneratedIds is going to be an array of numbers, and useMemo has number array in its slot. We're in a pretty good position just by removing the type argument itself.  
  
[1:06] If we were to pass this in, then we would just need to pass in the thing that gets returned from this little factory here. There's another way you can type this too.  
  
[1:17] This might be useful if you have a function where it can return lots of different things or your function has many branches and you want to make sure that it's locked down what it's returning.  
  
[1:29] You could do this, where you type it slightly differently, you type the return type manually, which, as we've seen, makes sure that you're passing the specific thing or you're typing the exact thing that's it's returning because, just like in useState, you might get some excess property check errors if you don't do this.  
  
[1:48] My suggestion when you're using useMemo is to type it like this, or don't type it at all and let the inference take care of itself because it's pretty good without any type arguments.

Typing the useMemo Hook

[0:00] In this exercise, we're going to look at useMemo to try to understand what it's doing. We have useMemo here, and what it takes is it takes in a function that returns something. Then it basically takes in a dependency array that you can pass in, like we've seen with useEffect and useCallback.  
  
[0:16] Here, we're generating 100 random string UIDs. We don't want to rerun that every time the component runs, so we've stuck it in a useMemo to make sure that it only does it once when the component initiates.  
  
[0:28] The thing that we're getting back is not this array of strings here. We're getting back a function that returns an array of strings. Your job is to figure out what has gone wrong here and dive into the type signature of useMemo to figure out what the real API is type-wise.

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

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 useMemo Hook

Transcript