React TypeScript Cheatsheet

Cheatsheet for using React with TypeScript.

---

<a href="https://github.com/typescript-cheatsheets/react/issues/81"> <img height="90" width="90" alt="react + ts logo" src="https://user-images.githubusercontent.com/84442212/194379444-02e5ec69-5e6c-4100-bd7a-c31d628af29c.png" align="left" /> </a>

Web docs | Contribute! | Ask!

:wave: This repo is maintained by @eps1lon and @filiptammergard. We're so happy you want to try out React with TypeScript! If you see anything wrong or missing, please file an issue! :+1:

---

|

• The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
  • Focus on opinionated best practices, copy+pastable examples.
  • Explains some basic TS types usage and setup along the way.
  • Answers the most Frequently Asked Questions.
  • Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
  • The goal is to get effective with TS without learning too much TS.
• The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React libraries.
  • It also has miscellaneous tips and tricks for pro users.
  • Advice for contributing to DefinitelyTyped.
  • The goal is to take full advantage of TypeScript.
• The Migrating Cheatsheet helps collate advice for incrementally migrating large codebases from JS or Flow, from people who have done it.
  • We do not try to convince people to switch, only to help people who have already decided.
  • ⚠️This is a new cheatsheet, all assistance is welcome.
• The HOC Cheatsheet specifically teaches people to write HOCs with examples.
  • Familiarity with Generics is necessary.
  • ⚠️This is the newest cheatsheet, all assistance is welcome.

---

Basic Cheatsheet

Basic Cheatsheet Table of Contents

<details> <summary><b>Expand Table of Contents</b></summary>

• React TypeScript Cheatsheet
  • Basic Cheatsheet
    • Basic Cheatsheet Table of Contents
    • Section 1: Setup
      • Prerequisites
      • React and TypeScript starter kits
      • Try React and TypeScript online
    • Section 2: Getting Started
      • Function Components
      • Hooks
      • useState
      • useCallback
      • useReducer
      • useEffect / useLayoutEffect
      • useRef
        • Option 1: DOM element ref
        • Option 2: Mutable value ref
        • See also
      • useImperativeHandle
        • See also:
      • Custom Hooks
      • More Hooks + TypeScript reading:
      • Example React Hooks + TypeScript Libraries:
      • Class Components
      • Typing getDerivedStateFromProps
      • You May Not Need defaultProps
      • Typing defaultProps
      • Consuming Props of a Component with defaultProps
        • Problem Statement
        • Solution
      • Misc Discussions and Knowledge
      • Typing Component Props
      • Basic Prop Types Examples
        • object as the non-primitive type
        • Empty interface, {} and Object
      • Useful React Prop Type Examples
      • Types or Interfaces?
        • TL;DR
        • More Advice
        • Useful table for Types vs Interfaces
  • getDerivedStateFromProps
    • Forms and Events
      • List of event types
    • Context
    • Basic example
    • Without default context value
      • Type assertion as an alternative
    • forwardRef/createRef
    • Generic forwardRefs
      • Option 1 - Wrapper component
      • Option 2 - Redeclare forwardRef
      • Option 3 - Call signature
    • More Info
    • Portals
    • Error Boundaries
      • Option 1: Using react-error-boundary
      • Option 2: Writing your custom error boundary component
    • Concurrent React/React Suspense
    • Troubleshooting Handbook: Types
      • Union Types and Type Guarding
      • Optional Types
      • Enum Types
      • Type Assertion
      • Simulating Nominal Types
      • Intersection Types
      • Union Types
      • Overloading Function Types
      • Using Inferred Types
      • Using Partial Types
      • The Types I need weren't exported!
      • The Types I need don't exist!
        • Slapping any on everything
        • Autogenerate types
        • Typing Exported Hooks
        • Typing Exported Components
      • Frequent Known Problems with TypeScript
        • TypeScript doesn't narrow after an object element null check
        • TypeScript doesn't let you restrict the type of children
    • Troubleshooting Handbook: Operators
    • Troubleshooting Handbook: Utilities
    • Troubleshooting Handbook: tsconfig.json
    • Troubleshooting Handbook: Fixing bugs in official typings
    • Troubleshooting Handbook: Globals, Images and other non-TS files
    • Editor Tooling and Integration
    • Linting
    • Other React + TypeScript resources
    • Recommended React + TypeScript talks
    • Time to Really Learn TypeScript
    • Example App
  • My question isn't answered here!
  • Contributors

</details> <!--START-SECTION:setup-->

Section 1: Setup

Prerequisites

You can use this cheatsheet for reference at any skill level, but basic understanding of React and TypeScript is assumed. Here is a list of prerequisites:

• Basic understanding of React.
• Familiarity with TypeScript Basics and Everyday Types.

In the cheatsheet we assume you are using the latest versions of React and TypeScript.

React and TypeScript starter kits

React has documentation for how to start a new React project with some of the most popular frameworks. Here's how to start them with TypeScript:

• Next.js: npx create-next-app@latest --ts
• Remix: npx create-remix@latest
• Gatsby: npm init gatsby --ts
• Expo: npx create-expo-app -t with-typescript

Try React and TypeScript online

There are some tools that let you run React and TypeScript onl