README

React TypeScript Cheatsheet

Cheatsheet for using React with TypeScript.

---


  


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 Cheatsheet is focused on helping React devs use TypeScript effectively:

- Opinionated best practices and copy+pastable examples.
- Covers basic TS types and setup, plus advanced usage of generic types for people writing reusable type utilities and React+TS libraries.
- Advice for contributing to DefinitelyTyped.

---

 Cheatsheet

 Table of Contents



Expand Table of Contents

- React TypeScript Cheatsheet
  - Cheatsheet
    - Table of Contents
    - Setup
      - Prerequisites
      - React and TypeScript starter kits
      - Try React and TypeScript online
    - 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
  - My question isn't answered here!
  - Contributors





 Introduction

 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 framew