typescript-cheatsheets/react

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/typescript-cheatsheets/react.svg?style=card)](https://bestofgithub.dev/repo/typescript-cheatsheets/react)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/typescript-cheatsheets/react.svg)](https://bestofgithub.dev/repo/typescript-cheatsheets/react)

Loading README…

Aspect	Type	Interface
Can describe functions	✅	✅
Can describe constructors	✅	✅
Can describe tuples	✅	✅
Interfaces can extend it	⚠️	✅
Classes can extend it	🚫	✅
Classes can implement it (`implements`)	⚠️	✅
Can intersect another one of its kind	✅	⚠️
Can create a union with another one of its kind	✅	🚫
Can be used to create mapped types	✅	🚫
Can be mapped over with mapped types	✅	✅
Expands in error messages and logs	✅	🚫
Can be augmented	🚫	✅
Can be recursive	⚠️	✅

Event Type	Description
AnimationEvent	CSS Animations.
ChangeEvent	Changing the value of `<input>`, `<select>` and `<textarea>` element.
ClipboardEvent	Using copy, paste and cut events.
CompositionEvent	Events that occur due to the user indirectly entering text (e.g. depending on Browser and PC setup, a popup window may appear with additional characters if you e.g. want to type Japanese on a US Keyboard)
DragEvent	Drag and drop interaction with a pointer device (e.g. mouse).
FocusEvent	Event that occurs when elements gets or loses focus.
FormEvent	Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted.
InvalidEvent	Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20).
KeyboardEvent	User interaction with the keyboard. Each event describes a single key interaction.
InputEvent	Event that occurs before the value of `<input>`, `<select>` and `<textarea>` changes.
MouseEvent	Events that occur due to the user interacting with a pointing device (e.g. mouse)
PointerEvent	Events that occur due to user interaction with a variety pointing of devices such as mouse, pen/stylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent.
TouchEvent	Events that occur due to the user interacting with a touch device. Extends UIEvent.
TransitionEvent	CSS Transition. Not fully browser supported. Extends UIEvent
UIEvent	Base Event for Mouse, Touch and Pointer events.
WheelEvent	Scrolling on a mouse wheel or similar input device. (Note: `wheel` event should not be confused with the `scroll` event)
SyntheticEvent	The base event for all above events. Should be used when unsure about event type

React TypeScript Cheatsheet

Cheatsheet

Table of Contents

Introduction

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

Custom Hooks

More Hooks + TypeScript reading:

Example React Hooks + TypeScript Libraries:

Class Components

Typing getDerivedStateFromProps

Function components

Class components

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

Ref as a Prop (Recommended for React 19+)

Option 1: Inherit all props from a native element

Option 2: Explicit typing

Legacy Approaches (Pre-React 19)

forwardRef

createRef

Generic Components with Refs

Option 1: Wrapper Component

Option 2: Redeclare forwardRef

Option 3: Call Signature

Additional Resources

Portals

Error Boundaries

Option 1: Using react-error-boundary

Option 2: Writing your custom error boundary component

Concurrent React

Suspense

use

useTransition

Async transitions (React 19)

useDeferredValue

initialValue (React 19)

startTransition (standalone)

See also

My question isn't answered here!

Contributors

`object` as the non-primitive type

Empty interface, `{}` and `Object`

`Suspense`

`use`

`useTransition`

`useDeferredValue`

`initialValue` (React 19)

`startTransition` (standalone)