Convert React Hooks

What you'll learn

  • annotate React hooks
  • annotate custom hooks
  • discuss common approach of organizing types


Typing useState hook

You don't need to specify the type manually most of the time as TypeScript able to infer it from the default value.

In the rare event when TypeScript inference doesn't work for you, you can declare it explicitly.

  • <Image />

Typing useEffect hook

I never need to type useEffect, ever.

This section is here just to assure you that. 😜

Typing useRef hook

There are two use cases of useRef, and how to provide typing for it depends on your use case.

  1. Use it as a reference to DOM element.

    To declare a ref for DOM element, just add the element type to the useRef hooks.


  2. Use it as a placeholder for mutable value.

    • useId

Custom Hooks

Because custom hooks are just functions, so you declare them just like how you declare them for typical functions in TypeScript.

  • useBoolean
  • useLatest
  • useTransientState

Organizing Type

Because types can be export and import just like variables, there is no "standard" way of organizing it, just like there is no "standard way of organizing" variables.

Usually I create a type.ts file in the src folder. Depends on your project, sometimes you may want to split it further. For example if your project split the code to modules, you may want to create a <module>.type.ts file for that module to avoid your type.ts file become a giant file.

Issue on this page? Report here