[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-840":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":31,"discoverSource":32},840,"react","typescript-cheatsheets\u002Freact","typescript-cheatsheets","Cheatsheets for experienced React developers getting started with TypeScript","https:\u002F\u002Freact-typescript-cheatsheet.netlify.app",null,"TypeScript",47067,4294,387,1,0,8,42,2,45,"MIT License",false,"main",[25,26,5,27],"cheatsheet","guide","typescript","2026-06-12 02:00:19","# React TypeScript Cheatsheet\n\nCheatsheet for using React with TypeScript.\n\n---\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F81\">\n  \u003Cimg\n    height=\"90\"\n    width=\"90\"\n    alt=\"react + ts logo\"\n    src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F84442212\u002F194379444-02e5ec69-5e6c-4100-bd7a-c31d628af29c.png\"\n    align=\"left\"\n  \u002F>\n\u003C\u002Fa>\n\n[**Web docs**](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fbasic\u002Fsetup) |\n[Contribute!](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fblob\u002Fmain\u002FCONTRIBUTING.md) |\n[Ask!](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew\u002Fchoose)\n\n:wave: This repo is maintained by [@eps1lon](https:\u002F\u002Ftwitter.com\u002Fsebsilbermann) and [@filiptammergard](https:\u002F\u002Ftwitter.com\u002Ftammergard). We're so happy you want to try out React with TypeScript! If you see anything wrong or missing, please [file an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew\u002Fchoose)! :+1:\n\n---\n\n[![All Contributors](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Ftypescript-cheatsheets\u002Freact-typescript-cheatsheet?color=orange&style=flat-square)](\u002FCONTRIBUTORS.md) | [![Discord](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F508357248330760243.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https:\u002F\u002Fdiscord.gg\u002FwTGS5z9)\n\n- [The Basic Cheatsheet](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fbasic\u002Fsetup) is focused on helping React devs just start using TS in React **apps**\n  - Focus on opinionated best practices, copy+pastable examples.\n  - Explains some basic TS types usage and setup along the way.\n  - Answers the most Frequently Asked Questions.\n  - Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.\n  - The goal is to get effective with TS without learning _too much_ TS.\n- [The Advanced Cheatsheet](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fadvanced) helps show and explain advanced usage of generic types for people writing reusable type utilities\u002Ffunctions\u002Frender prop\u002Fhigher order components and TS+React **libraries**.\n  - It also has miscellaneous tips and tricks for pro users.\n  - Advice for contributing to DefinitelyTyped.\n  - The goal is to take _full advantage_ of TypeScript.\n- [The Migrating Cheatsheet](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fmigration) helps collate advice for incrementally migrating large codebases from JS or Flow, **from people who have done it**.\n  - We do not try to convince people to switch, only to help people who have already decided.\n  - ⚠️This is a new cheatsheet, all assistance is welcome.\n- [The HOC Cheatsheet](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fhoc) specifically teaches people to write HOCs with examples.\n  - Familiarity with [Generics](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Fgenerics.html) is necessary.\n  - ⚠️This is the newest cheatsheet, all assistance is welcome.\n\n---\n\n## Basic Cheatsheet\n\n### Basic Cheatsheet Table of Contents\n\n\u003Cdetails>\n\n\u003Csummary>\u003Cb>Expand Table of Contents\u003C\u002Fb>\u003C\u002Fsummary>\n\n- [React TypeScript Cheatsheet](#react-typescript-cheatsheet)\n  - [Basic Cheatsheet](#basic-cheatsheet)\n    - [Basic Cheatsheet Table of Contents](#basic-cheatsheet-table-of-contents)\n    - [Section 1: Setup](#section-1-setup)\n      - [Prerequisites](#prerequisites)\n      - [React and TypeScript starter kits](#react-and-typescript-starter-kits)\n      - [Try React and TypeScript online](#try-react-and-typescript-online)\n    - [Section 2: Getting Started](#section-2-getting-started)\n      - [Function Components](#function-components)\n      - [Hooks](#hooks)\n      - [useState](#usestate)\n      - [useCallback](#usecallback)\n      - [useReducer](#usereducer)\n      - [useEffect \u002F useLayoutEffect](#useeffect--uselayouteffect)\n      - [useRef](#useref)\n        - [Option 1: DOM element ref](#option-1-dom-element-ref)\n        - [Option 2: Mutable value ref](#option-2-mutable-value-ref)\n        - [See also](#see-also)\n      - [useImperativeHandle](#useimperativehandle)\n        - [See also:](#see-also-1)\n      - [Custom Hooks](#custom-hooks)\n      - [More Hooks + TypeScript reading:](#more-hooks--typescript-reading)\n      - [Example React Hooks + TypeScript Libraries:](#example-react-hooks--typescript-libraries)\n      - [Class Components](#class-components)\n      - [Typing getDerivedStateFromProps](#typing-getderivedstatefromprops)\n      - [You May Not Need `defaultProps`](#you-may-not-need-defaultprops)\n      - [Typing `defaultProps`](#typing-defaultprops)\n      - [Consuming Props of a Component with defaultProps](#consuming-props-of-a-component-with-defaultprops)\n        - [Problem Statement](#problem-statement)\n        - [Solution](#solution)\n      - [Misc Discussions and Knowledge](#misc-discussions-and-knowledge)\n      - [Typing Component Props](#typing-component-props)\n      - [Basic Prop Types Examples](#basic-prop-types-examples)\n        - [`object` as the non-primitive type](#object-as-the-non-primitive-type)\n        - [Empty interface, `{}` and `Object`](#empty-interface--and-object)\n      - [Useful React Prop Type Examples](#useful-react-prop-type-examples)\n      - [Types or Interfaces?](#types-or-interfaces)\n        - [TL;DR](#tldr)\n        - [More Advice](#more-advice)\n        - [Useful table for Types vs Interfaces](#useful-table-for-types-vs-interfaces)\n  - [getDerivedStateFromProps](#getderivedstatefromprops)\n    - [Forms and Events](#forms-and-events)\n      - [List of event types](#list-of-event-types)\n    - [Context](#context)\n    - [Basic example](#basic-example)\n    - [Without default context value](#without-default-context-value)\n      - [Type assertion as an alternative](#type-assertion-as-an-alternative)\n    - [forwardRef\u002FcreateRef](#forwardrefcreateref)\n    - [Generic forwardRefs](#generic-forwardrefs)\n      - [Option 1 - Wrapper component](#option-1---wrapper-component)\n      - [Option 2 - Redeclare forwardRef](#option-2---redeclare-forwardref)\n      - [Option 3 - Call signature](#option-3---call-signature)\n    - [More Info](#more-info)\n    - [Portals](#portals)\n    - [Error Boundaries](#error-boundaries)\n      - [Option 1: Using react-error-boundary](#option-1-using-react-error-boundary)\n      - [Option 2: Writing your custom error boundary component](#option-2-writing-your-custom-error-boundary-component)\n    - [Concurrent React\u002FReact Suspense](#concurrent-reactreact-suspense)\n    - [Troubleshooting Handbook: Types](#troubleshooting-handbook-types)\n      - [Union Types and Type Guarding](#union-types-and-type-guarding)\n      - [Optional Types](#optional-types)\n      - [Enum Types](#enum-types)\n      - [Type Assertion](#type-assertion)\n      - [Simulating Nominal Types](#simulating-nominal-types)\n      - [Intersection Types](#intersection-types)\n      - [Union Types](#union-types)\n      - [Overloading Function Types](#overloading-function-types)\n      - [Using Inferred Types](#using-inferred-types)\n      - [Using Partial Types](#using-partial-types)\n      - [The Types I need weren't exported!](#the-types-i-need-werent-exported)\n      - [The Types I need don't exist!](#the-types-i-need-dont-exist)\n        - [Slapping `any` on everything](#slapping-any-on-everything)\n        - [Autogenerate types](#autogenerate-types)\n        - [Typing Exported Hooks](#typing-exported-hooks)\n        - [Typing Exported Components](#typing-exported-components)\n      - [Frequent Known Problems with TypeScript](#frequent-known-problems-with-typescript)\n        - [TypeScript doesn't narrow after an object element null check](#typescript-doesnt-narrow-after-an-object-element-null-check)\n        - [TypeScript doesn't let you restrict the type of children](#typescript-doesnt-let-you-restrict-the-type-of-children)\n    - [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators)\n    - [Troubleshooting Handbook: Utilities](#troubleshooting-handbook-utilities)\n    - [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook-tsconfigjson)\n    - [Troubleshooting Handbook: Fixing bugs in official typings](#troubleshooting-handbook-fixing-bugs-in-official-typings)\n    - [Troubleshooting Handbook: Globals, Images and other non-TS files](#troubleshooting-handbook-globals-images-and-other-non-ts-files)\n    - [Editor Tooling and Integration](#editor-tooling-and-integration)\n    - [Linting](#linting)\n    - [Other React + TypeScript resources](#other-react--typescript-resources)\n    - [Recommended React + TypeScript talks](#recommended-react--typescript-talks)\n    - [Time to Really Learn TypeScript](#time-to-really-learn-typescript)\n    - [Example App](#example-app)\n  - [My question isn't answered here!](#my-question-isnt-answered-here)\n  - [Contributors](#contributors)\n\n\u003C\u002Fdetails>\n\n\u003C!--START-SECTION:setup-->\n\n### Section 1: Setup\n\n#### Prerequisites\n\nYou 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:\n\n- Basic understanding of [React](https:\u002F\u002Freact.dev\u002F).\n- Familiarity with [TypeScript Basics](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Fbasic-types.html) and [Everyday Types](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Feveryday-types.html).\n\nIn the cheatsheet we assume you are using the latest versions of React and TypeScript.\n\n#### React and TypeScript starter kits\n\nReact has documentation for [how to start a new React project](https:\u002F\u002Freact.dev\u002Flearn\u002Fstart-a-new-react-project) with some of the most popular frameworks. Here's how to start them with TypeScript:\n\n- [Next.js](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Ftypescript): `npx create-next-app@latest --ts`\n- [Remix](https:\u002F\u002Fremix.run\u002Fdocs\u002Ftutorials\u002Fblog): `npx create-remix@latest`\n- [Gatsby](https:\u002F\u002Fwww.gatsbyjs.com\u002Fdocs\u002Fhow-to\u002Fcustom-configuration\u002Ftypescript\u002F): `npm init gatsby --ts`\n- [Expo](https:\u002F\u002Fdocs.expo.dev\u002Fguides\u002Ftypescript\u002F): `npx create-expo-app -t with-typescript`\n\n#### Try React and TypeScript online\n\nThere are some tools that let you run React and TypeScript online, which can be helpful for debugging or making sharable reproductions.\n\n- [TypeScript playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay?target=8&jsx=4#code\u002FJYWwDg9gTgLgBAbzgVwM4FMDKMCGN0A0KGAogGZnoDG8AvnGVBCHAORTo42sDcAsAChB6AB6RYcKhAB2qeAGEIyafihwAvHAAUASg0A+RILiSZcuAG0pymEQwxFNgLobiWXPi0AGHfyECTNHRyShotXQMjAJM4ABMIKmQQdBUAOhhgGAAbdFcAAwBNJUks4CoAa3RYuAASBGsVegzk1Dy-E1pfQWM4DhhkKGltHpMAHn0RmNGwfSLkErLK6vqlRrhm9FRRgHoZybGAI2QYGBk4GXlSivUECPVDe0cVLQb4AGo4AEYdWgnomJil0WcGS+zgOyOJxkfwBOxhcC6AlogiAA)\n- [StackBlitz](https:\u002F\u002Fstackblitz.com\u002Ffork\u002Freact-ts)\n- [CodeSandbox](https:\u002F\u002Fts.react.new\u002F)\n\n\u003C!--END-SECTION:setup-->\n\n### Section 2: Getting Started\n\n\u003C!--START-SECTION:function-components-->\n\n#### Function Components\n\nThese can be written as normal functions that take a `props` argument and return a JSX element.\n\n```tsx\n\u002F\u002F Declaring type of props - see \"Typing Component Props\" for more examples\ntype AppProps = {\n  message: string;\n}; \u002F* use `interface` if exporting so that consumers can extend *\u002F\n\n\u002F\u002F Easiest way to declare a Function Component; return type is inferred.\nconst App = ({ message }: AppProps) => \u003Cdiv>{message}\u003C\u002Fdiv>;\n\n\u002F\u002F You can choose to annotate the return type so an error is raised if you accidentally return some other type\nconst App = ({ message }: AppProps): React.JSX.Element => \u003Cdiv>{message}\u003C\u002Fdiv>;\n\n\u002F\u002F You can also inline the type declaration; eliminates naming the prop types, but looks repetitive\nconst App = ({ message }: { message: string }) => \u003Cdiv>{message}\u003C\u002Fdiv>;\n\n\u002F\u002F Alternatively, you can use `React.FunctionComponent` (or `React.FC`), if you prefer.\n\u002F\u002F With latest React types and TypeScript 5.1. it's mostly a stylistic choice, otherwise discouraged.\nconst App: React.FunctionComponent\u003C{ message: string }> = ({ message }) => (\n  \u003Cdiv>{message}\u003C\u002Fdiv>\n);\n\u002F\u002F or\nconst App: React.FC\u003CAppProps> = ({ message }) => \u003Cdiv>{message}\u003C\u002Fdiv>;\n```\n\n> Tip: You might use [Paul Shen's VS Code Extension](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=paulshen.paul-typescript-toolkit) to automate the type destructure declaration (incl a [keyboard shortcut](https:\u002F\u002Ftwitter.com\u002F_paulshen\u002Fstatus\u002F1392915279466745857?s=20)).\n\n\u003Cdetails>\n\n\u003Csummary>\u003Cb>Why is \u003Ccode>React.FC\u003C\u002Fcode> not needed? What about \u003Ccode>React.FunctionComponent\u003C\u002Fcode>\u002F\u003Ccode>React.VoidFunctionComponent\u003C\u002Fcode>?\u003C\u002Fb>\u003C\u002Fsummary>\n\nYou may see this in many React+TypeScript codebases:\n\n```tsx\nconst App: React.FunctionComponent\u003C{ message: string }> = ({ message }) => (\n  \u003Cdiv>{message}\u003C\u002Fdiv>\n);\n```\n\nHowever, the general consensus today is that `React.FunctionComponent` (or the shorthand `React.FC`) is not needed. If you're still using React 17 or TypeScript lower than 5.1, it is even [discouraged](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app\u002Fpull\u002F8177). This is a nuanced opinion of course, but if you agree and want to remove `React.FC` from your codebase, you can use [this jscodeshift codemod](https:\u002F\u002Fgithub.com\u002Fgndelia\u002Fcodemod-replace-react-fc-typescript).\n\nSome differences from the \"normal function\" version:\n\n- `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).\n\n- It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps`.\n\n  - Note that there are some known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F87). We maintain a separate `defaultProps` section you can also look up.\n\n- Before the [React 18 type updates](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fpull\u002F56210), `React.FunctionComponent` provided an implicit definition of `children` (see below), which was heavily debated and is one of the reasons [`React.FC` was removed from the Create React App TypeScript template](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app\u002Fpull\u002F8177).\n\n```tsx\n\u002F\u002F before React 18 types\nconst Title: React.FunctionComponent\u003C{ title: string }> = ({\n  children,\n  title,\n}) => \u003Cdiv title={title}>{children}\u003C\u002Fdiv>;\n```\n\n\u003Cdetails>\n\u003Csummary>(Deprecated)\u003Cb>Using \u003Ccode>React.VoidFunctionComponent\u003C\u002Fcode> or \u003Ccode>React.VFC\u003C\u002Fcode> instead\u003C\u002Fb>\u003C\u002Fsummary>\n\nIn [@types\u002Freact 16.9.48](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fpull\u002F46643), the `React.VoidFunctionComponent` or `React.VFC` type was added for typing `children` explicitly.\nHowever, please be aware that `React.VFC` and `React.VoidFunctionComponent` were deprecated in React 18 (https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fpull\u002F59882), so this interim solution is no longer necessary or recommended in React 18+.\n\nPlease use regular function components or `React.FC` instead.\n\n```ts\ntype Props = { foo: string };\n\n\u002F\u002F OK now, in future, error\nconst FunctionComponent: React.FunctionComponent\u003CProps> = ({\n  foo,\n  children,\n}: Props) => {\n  return (\n    \u003Cdiv>\n      {foo} {children}\n    \u003C\u002Fdiv>\n  ); \u002F\u002F OK\n};\n\n\u002F\u002F Error now, in future, deprecated\nconst VoidFunctionComponent: React.VoidFunctionComponent\u003CProps> = ({\n  foo,\n  children,\n}) => {\n  return (\n    \u003Cdiv>\n      {foo}\n      {children}\n    \u003C\u002Fdiv>\n  );\n};\n```\n\n\u003C\u002Fdetails>\n\n- _In the future_, it may automatically mark props as `readonly`, though that's a moot point if the props object is destructured in the parameter list.\n\nIn most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`.\n\n\u003C\u002Fdetails>\n\n\u003C!--END-SECTION:function-components-->\n\n\u003C!--START-SECTION:hooks-->\n\n#### Hooks\n\nHooks are [supported in `@types\u002Freact` from v16.8 up](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fblob\u002Fa05cc538a42243c632f054e42eab483ebf1560ab\u002Ftypes\u002Freact\u002Findex.d.ts#L800-L1031).\n\n#### useState\n\nType inference works very well for simple values:\n\n```tsx\nconst [state, setState] = useState(false);\n\u002F\u002F `state` is inferred to be a boolean\n\u002F\u002F `setState` only takes booleans\n```\n\nSee also the [Using Inferred Types](https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fbasic\u002Ftroubleshooting\u002Ftypes\u002F#using-inferred-types) section if you need to use a complex type that you've relied on inference for.\n\nHowever, many hooks are initialized with null-ish default values, and you may wonder how to provide types. Explicitly declare the type, and use a union type:\n\n```tsx\nconst [user, setUser] = useState\u003CUser | null>(null);\n\n\u002F\u002F later...\nsetUser(newUser);\n```\n\nYou can also use type assertions if a state is initialized soon after setup and always has a value after:\n\n```tsx\nconst [user, setUser] = useState\u003CUser>({} as User);\n\n\u002F\u002F later...\nsetUser(newUser);\n```\n\nThis temporarily \"lies\" to the TypeScript compiler that `{}` is of type `User`. You should follow up by setting the `user` state — if you don't, the rest of your code may rely on the fact that `user` is of type `User` and that may lead to runtime errors.\n\n#### useCallback\n\nYou can type the `useCallback` just like any other function.\n\n```ts\nconst memoizedCallback = useCallback(\n  (param1: string, param2: number) => {\n    console.log(param1, param2)\n    return { ok: true }\n  },\n  [...],\n);\n\u002F**\n * VSCode will show the following type:\n * const memoizedCallback:\n *  (param1: string, param2: number) => { ok: boolean }\n *\u002F\n```\n\nNote that for React \u003C 18, the function signature of `useCallback` typed arguments as `any[]` by default:\n\n```ts\nfunction useCallback\u003CT extends (...args: any[]) => any>(\n  callback: T,\n  deps: DependencyList\n): T;\n```\n\nIn React >= 18, the function signature of `useCallback` changed to the following:\n\n```ts\nfunction useCallback\u003CT extends Function>(callback: T, deps: DependencyList): T;\n```\n\nTherefore, the following code will yield \"`Parameter 'e' implicitly has an 'any' type.`\" error in React >= 18, but not \u003C17.\n\n```ts\n\u002F\u002F @ts-expect-error Parameter 'e' implicitly has 'any' type.\nuseCallback((e) => {}, []);\n\u002F\u002F Explicit 'any' type.\nuseCallback((e: any) => {}, []);\n```\n\n#### useReducer\n\nYou can use [Discriminated Unions](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Ftypescript-in-5-minutes-func.html#discriminated-unions) for reducer actions. Don't forget to define the return type of reducer, otherwise TypeScript will infer it.\n\n```tsx\nimport { useReducer } from \"react\";\n\nconst initialState = { count: 0 };\n\ntype ACTIONTYPE =\n  | { type: \"increment\"; payload: number }\n  | { type: \"decrement\"; payload: string };\n\nfunction reducer(state: typeof initialState, action: ACTIONTYPE) {\n  switch (action.type) {\n    case \"increment\":\n      return { count: state.count + action.payload };\n    case \"decrement\":\n      return { count: state.count - Number(action.payload) };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  return (\n    \u003C>\n      Count: {state.count}\n      \u003Cbutton onClick={() => dispatch({ type: \"decrement\", payload: \"5\" })}>\n        -\n      \u003C\u002Fbutton>\n      \u003Cbutton onClick={() => dispatch({ type: \"increment\", payload: 5 })}>\n        +\n      \u003C\u002Fbutton>\n    \u003C\u002F>\n  );\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay?#code\u002FLAKFEsFsAcHsCcAuACAVMghgZ2QJQKYYDGKAZvLJMgOTyEnUDcooRsAdliuO+IuBgA2AZUQZE+ZAF5kAbzYBXdogBcyAAwBfZmBCIAntEkBBAMIAVAJIB5AHLmAmgAUAotOShkyAD5zkBozVqHiI6SHxlagAaZGgMfUFYDAATNXYFSAAjfHhNDxAvX1l-Q3wg5PxQ-HDImLiEpNTkLngeAHM8ll1SJRJwDmQ6ZIUiHIAKLnEykqNYUmQePgERMQkY4n4ONTMrO0dXAEo5T2aAdz4iAAtkMY3+9gA6APwj2ROvImxJYPYqmsRqCp3l5BvhEAp4Ow5IplGpJhIHjCUABqTB9DgPeqJFLaYGfLDfCp-CIAoEFEFeOjgyHQ2BKVTNVb4RF05TIAC0yFsGWy8Fu6MeWMaB1x5K8FVIGAUglUwK8iEuFFOyHY+GVLngFD5Bx0Xk0oH13V6myhplZEm1x3JbE4KAA2vD8DFkuAsHFEFcALruAgbB4KAkEYajPlDEY5GKLfhCURTHUnKkQqFjYEAHgAfHLkGb6WpZI6WfTDRSvKnMgpEIgBhxTIJwEQANZSWRjI5SdPIF1u8RXMayZ7lSphEnRWLxbFNagAVmomhF6fZqYA9OXKxxM2KQWWK1WoTW643m63pB2u+7e-3SkEQsPamOGik1FO55p08jl6vdxuKcvv8h4yAmhAA)\n\n\u003Cdetails>\n\n\u003Csummary>\u003Cb>Usage with \u003Ccode>Reducer\u003C\u002Fcode> from \u003Ccode>redux\u003C\u002Fcode>\u003C\u002Fb>\u003C\u002Fsummary>\n\nIn case you use the [redux](https:\u002F\u002Fgithub.com\u002Freduxjs\u002Fredux) library to write reducer function, It provides a convenient helper of the format `Reducer\u003CState, Action>` which takes care of the return type for you.\n\nSo the above reducer example becomes:\n\n```tsx\nimport { Reducer } from 'redux';\n\nexport function reducer: Reducer\u003CAppState, Action>() {}\n```\n\n\u003C\u002Fdetails>\n\n#### useEffect \u002F useLayoutEffect\n\nBoth of `useEffect` and `useLayoutEffect` are used for performing \u003Cb>side effects\u003C\u002Fb> and return an optional cleanup function which means if they don't deal with returning values, no types are necessary. When using `useEffect`, take care not to return anything other than a function or `undefined`, otherwise both TypeScript and React will yell at you. This can be subtle when using arrow functions:\n\n```ts\nfunction DelayedEffect(props: { timerMs: number }) {\n  const { timerMs } = props;\n\n  useEffect(\n    () =>\n      setTimeout(() => {\n        \u002F* do stuff *\u002F\n      }, timerMs),\n    [timerMs]\n  );\n  \u002F\u002F bad example! setTimeout implicitly returns a number\n  \u002F\u002F because the arrow function body isn't wrapped in curly braces\n  return null;\n}\n```\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Solution to the above example\u003C\u002Fb>\u003C\u002Fsummary>\n\n```tsx\nfunction DelayedEffect(props: { timerMs: number }) {\n  const { timerMs } = props;\n\n  useEffect(() => {\n    setTimeout(() => {\n      \u002F* do stuff *\u002F\n    }, timerMs);\n  }, [timerMs]);\n  \u002F\u002F better; use the void keyword to make sure you return undefined\n  return null;\n}\n```\n\n\u003C\u002Fdetails>\n\n#### useRef\n\nIn TypeScript, `useRef` returns a reference that is either [read-only](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fblob\u002Fabd69803c1b710db58d511f4544ec1b70bc9077c\u002Ftypes\u002Freact\u002Fv16\u002Findex.d.ts#L1025-L1039) or [mutable](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fblob\u002Fabd69803c1b710db58d511f4544ec1b70bc9077c\u002Ftypes\u002Freact\u002Fv16\u002Findex.d.ts#L1012-L1023), depends on whether your type argument fully covers the initial value or not. Choose one that suits your use case.\n\n##### Option 1: DOM element ref\n\n**[To access a DOM element](https:\u002F\u002Freactjs.org\u002Fdocs\u002Frefs-and-the-dom.html):** provide only the element type as argument, and use `null` as initial value. In this case, the returned reference will have a read-only `.current` that is managed by React. TypeScript expects you to give this ref to an element's `ref` prop:\n\n```tsx\nfunction Foo() {\n  \u002F\u002F - If possible, prefer as specific as possible. For example, HTMLDivElement\n  \u002F\u002F   is better than HTMLElement and way better than Element.\n  \u002F\u002F - Technical-wise, this returns RefObject\u003CHTMLDivElement>\n  const divRef = useRef\u003CHTMLDivElement>(null);\n\n  useEffect(() => {\n    \u002F\u002F Note that ref.current may be null. This is expected, because you may\n    \u002F\u002F conditionally render the ref-ed element, or you may forget to assign it\n    if (!divRef.current) throw Error(\"divRef is not assigned\");\n\n    \u002F\u002F Now divRef.current is sure to be HTMLDivElement\n    doSomethingWith(divRef.current);\n  });\n\n  \u002F\u002F Give the ref to an element so React can manage it for you\n  return \u003Cdiv ref={divRef}>etc\u003C\u002Fdiv>;\n}\n```\n\nIf you are sure that `divRef.current` will never be null, it is also possible to use the non-null assertion operator `!`:\n\n```tsx\nconst divRef = useRef\u003CHTMLDivElement>(null!);\n\u002F\u002F Later... No need to check if it is null\ndoSomethingWith(divRef.current);\n```\n\nNote that you are opting out of type safety here - you will have a runtime error if you forget to assign the ref to an element in the render, or if the ref-ed element is conditionally rendered.\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Tip: Choosing which \u003Ccode>HTMLElement\u003C\u002Fcode> to use\u003C\u002Fb>\u003C\u002Fsummary>\n  \nRefs demand specificity - it is not enough to just specify any old `HTMLElement`. If you don't know the name of the element type you need, you can check [lib.dom.ts](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript\u002Fblob\u002Fv3.9.5\u002Flib\u002Flib.dom.d.ts#L19224-L19343) or make an intentional type error and let the language service tell you:\n\n![image](https:\u002F\u002Fuser-images.githubusercontent.com\u002F6764957\u002F116914284-1c436380-ac7d-11eb-9150-f52c571c5f07.png)\n\n\u003C\u002Fdetails>\n\n##### Option 2: Mutable value ref\n\n**[To have a mutable value](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-faq.html#is-there-something-like-instance-variables):** provide the type you want, and make sure the initial value fully belongs to that type:\n\n```tsx\nfunction Foo() {\n  \u002F\u002F Technical-wise, this returns MutableRefObject\u003Cnumber | null>\n  const intervalRef = useRef\u003Cnumber | null>(null);\n\n  \u002F\u002F You manage the ref yourself (that's why it's called MutableRefObject!)\n  useEffect(() => {\n    intervalRef.current = setInterval(...);\n    return () => clearInterval(intervalRef.current);\n  }, []);\n\n  \u002F\u002F The ref is not passed to any element's \"ref\" prop\n  return \u003Cbutton onClick={\u002F* clearInterval the ref *\u002F}>Cancel timer\u003C\u002Fbutton>;\n}\n```\n\n##### See also\n\n- [Related issue by @rajivpunjabi](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F388) - [Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay#code\u002FJYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwCwAUI7hAHarwCCYYcAvHAAUASn4A+OAG9GjOHAD0CBLLnKGcxHABiwKBzgQwMYGxS4WUACbBWAczgwIcSxFwBXEFlYxkxtgDoVTQBJVmBjZAAbOAA3KLcsOAB3YEjogCNE1jc0-zgAGQBPG3tHOAAVQrAsAGVcKGAjOHTCuDdUErhWNgBabLSUVFQsWBNWA2qoX2hA9VU4AGFKXyx0AFk3H3TIxOwCOAB5dIArLHwgpHcoSm84MGJJmFbgdG74ZcsDVkjC2Y01f7yFQsdjvLAEACM-EwVBg-naWD2AB4ABLlNb5GpgZCsACiO083jEgn6kQAhMJ6HMQfpKJCFpE2IkBNg8HCEci0RisTj8VhCTBiaSKVSVIoAaoLnBQuFgFFYvFEikBpkujkMps4FgAB7VfCdLmY7F4gleOFwAByEHg7U63VYfXVg2Go1MhhG0ygf3mAHVUtF6jgYLtwUdTvguta4Bstjs9mGznCpVcbvB7u7YM90B8vj9vYgLkDqWxaeCAEzQ1n4eHDTnoo2801EknqykyObii5SmpnNifA5GMZmCzWOwOJwudwC3xjKUyiLROKRBLJf3NLJO9KanV64xj0koVifQ08k38s1Sv0DJZBxIx5DbRGhk6J5Nua5mu4PEZPOAvSNgsgnxsHmXZzIgRZyDSYIEAAzJWsI1k+BCovWp58gKcAAD5qmkQqtqKHbyCexoYRecw7IQugcAs76ptCdIQv4KZmoRcjyMRaGkU28A4aSKiUXAwwgpYtEfrcAh0mWzF0ax7bsZx3Lceetx8eqAlYPAMAABa6KJskSXAdKwTJ4kwGxCjyKy-bfK05SrDA8mWVagHAbZeScOY0CjqUE6uOgqDaRAOSfKqOYgb8KiMaZ9GSeCEIMkyMVyUwRHWYc7nSvAgUQEk6AjMQXpReWyWGdFLHeBZHEuTCQEZT8xVwaV8BxZCzUWZQMDvuMghBHASJVnCWhTLYApiH1chIqgxpGeCfCSIxAC+Yj3o+8YvvgSLyNNOLjeBGhTTNdLzVJy3reGMBbTtrB7RoB3XbNBAneCsHLatcbPhdV3GrdB1WYhw3IKNZq-W2DCLYRO7QPAljgsgORcDwVJAA)\n- [Example from Stefan Baumgartner](https:\u002F\u002Ffettblog.eu\u002Ftypescript-react\u002Fhooks\u002F#useref) - [Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wFgAoCzAVwDsNgJa4AVJADxgElaxqYA6sBgALAGIQ01AM4AhfjCYAKAJRwA3hThwA9DrjBaw4CgA2waUjgB3YSLi1qp0wBo4AI35wYSZ6wCeYEgAymhQwGDw1lYoRHCmEBAA1oYA5nCY0HAozAASLACyADI8fDAAoqZIIEi0MFpwaEzS8IZllXAAvIjEMAB0MkjImAA8+cWl-JXVtTAAfEqOzioA3A1NtC1wTPIwirQAwuZoSV1wql1zGg3aenAt4RgOTqaNIkgn0g5ISAAmcDJvBA3h9TsBMAZeFNXjl-lIoEQ6nAOBZ+jddPpPPAmGgrPDEfAUS1pG5hAYvhAITBAlZxiUoRUqjU6m5RIDhOi7iIUF9RFYaqIIP9MlJpABCOCAUHJ0eDzm1oXAAGSKyHtUx9fGzNSacjaPWq6Ea6gI2Z9EUyVRrXV6gC+DRtVu0RBgxuYSnRIzm6O06h0ACpIdlfr9jExSQyOkxTP5GjkPFZBv9bKIDYSmbNpH04ABNFD+CV+nR2636kby+BETCddTlyo27w0zr4HycfC6L0lvUjLH7baHY5Jas7BRMI7AE42uYSUXed6pkY6HtMDulnQruCrCg2oA)\n\n#### useImperativeHandle\n\nBased on this [Stackoverflow answer](https:\u002F\u002Fstackoverflow.com\u002Fa\u002F69292925\u002F5415299):\n\n```tsx\n\u002F\u002F Countdown.tsx\n\n\u002F\u002F Define the handle types which will be passed to the forwardRef\nexport type CountdownHandle = {\n  start: () => void;\n};\n\ntype CountdownProps = {};\n\nconst Countdown = forwardRef\u003CCountdownHandle, CountdownProps>((props, ref) => {\n  useImperativeHandle(ref, () => ({\n    \u002F\u002F start() has type inference here\n    start() {\n      alert(\"Start\");\n    },\n  }));\n\n  return \u003Cdiv>Countdown\u003C\u002Fdiv>;\n});\n```\n\n```tsx\n\u002F\u002F The component uses the Countdown component\n\nimport Countdown, { CountdownHandle } from \".\u002FCountdown.tsx\";\n\nfunction App() {\n  const countdownEl = useRef\u003CCountdownHandle>(null);\n\n  useEffect(() => {\n    if (countdownEl.current) {\n      \u002F\u002F start() has type inference here as well\n      countdownEl.current.start();\n    }\n  }, []);\n\n  return \u003CCountdown ref={countdownEl} \u002F>;\n}\n```\n\n##### See also:\n\n- [Using ForwardRefRenderFunction](https:\u002F\u002Fstackoverflow.com\u002Fa\u002F62258685\u002F5415299)\n\n#### Custom Hooks\n\nIf you are returning an array in your Custom Hook, you will want to avoid type inference as TypeScript will infer a union type (when you actually want different types in each position of the array). Instead, use [TS 3.4 const assertions](https:\u002F\u002Fdevblogs.microsoft.com\u002Ftypescript\u002Fannouncing-typescript-3-4\u002F#const-assertions):\n\n```tsx\nimport { useState } from \"react\";\n\nexport function useLoading() {\n  const [isLoading, setState] = useState(false);\n  const load = (aPromise: Promise\u003Cany>) => {\n    setState(true);\n    return aPromise.finally(() => setState(false));\n  };\n  return [isLoading, load] as const; \u002F\u002F infers [boolean, typeof load] instead of (boolean | typeof load)[]\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?target=5&jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCpAD0ljkwFcA7DYCZuRgZyQBkIKACbBmAcwAUASjgBvCnDhoO3eAG1g3AcNFiANHF4wAyjBQwkAXTgBeRMRgA6HklPmkEzCgA2vKQG4FJRV4b0EhWzgJFAAFHBBNJAAuODjcRIAeFGYATwA+GRs8uSDFIzcLCRgoRiQA0rgiGEYoTlj4xMdMUR9vHIlpW2Lys0qvXzr68kUAX0DpxqRm1rgNLXDdAzDhaxRuYOZVfzgAehO4UUwkKH21ACMICG9UZgMYHLAkCEw4baFrUSqVARb5RB5PF5wAA+cHen1BfykaksFBmQA)\n\nThis way, when you destructure you actually get the right types based on destructure position.\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Alternative: Asserting a tuple return type\u003C\u002Fb>\u003C\u002Fsummary>\n\nIf you are [having trouble with const assertions](https:\u002F\u002Fgithub.com\u002Fbabel\u002Fbabel\u002Fissues\u002F9800), you can also assert or define the function return types:\n\n```tsx\nimport { useState } from \"react\";\n\nexport function useLoading() {\n  const [isLoading, setState] = useState(false);\n  const load = (aPromise: Promise\u003Cany>) => {\n    setState(true);\n    return aPromise.finally(() => setState(false));\n  };\n  return [isLoading, load] as [\n    boolean,\n    (aPromise: Promise\u003Cany>) => Promise\u003Cany>\n  ];\n}\n```\n\nA helper function that automatically types tuples can also be helpful if you write a lot of custom hooks:\n\n```tsx\nfunction tuplify\u003CT extends any[]>(...elements: T) {\n  return elements;\n}\n\nfunction useArray() {\n  const numberValue = useRef(3).current;\n  const functionValue = useRef(() => {}).current;\n  return [numberValue, functionValue]; \u002F\u002F type is (number | (() => void))[]\n}\n\nfunction useTuple() {\n  const numberValue = useRef(3).current;\n  const functionValue = useRef(() => {}).current;\n  return tuplify(numberValue, functionValue); \u002F\u002F type is [number, () => void]\n}\n```\n\n\u003C\u002Fdetails>\n\nNote that the React team recommends that custom hooks that return more than two values should use proper objects instead of tuples, however.\n\n#### More Hooks + TypeScript reading:\n\n- https:\u002F\u002Fmedium.com\u002F@jrwebdev\u002Freact-hooks-in-typescript-88fce7001d0d\n- https:\u002F\u002Ffettblog.eu\u002Ftypescript-react\u002Fhooks\u002F#useref\n\nIf you are writing a React Hooks library, don't forget that you should also expose your types for users to use.\n\n#### Example React Hooks + TypeScript Libraries:\n\n- https:\u002F\u002Fgithub.com\u002Fmweststrate\u002Fuse-st8\n- https:\u002F\u002Fgithub.com\u002Fpalmerhq\u002Fthe-platform\n- https:\u002F\u002Fgithub.com\u002Fsw-yx\u002Fhooks\n\n[Something to add? File an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew).\n\n\u003C!--END-SECTION:hooks-->\n\n\u003C!--START-SECTION:class-components-->\n\n#### Class Components\n\nWithin TypeScript, `React.Component` is a generic type (aka `React.Component\u003CPropType, StateType>`), so you want to provide it with (optional) prop and state type parameters:\n\n```tsx\ntype MyProps = {\n  \u002F\u002F using `interface` is also ok\n  message: string;\n};\ntype MyState = {\n  count: number; \u002F\u002F like this\n};\nclass App extends React.Component\u003CMyProps, MyState> {\n  state: MyState = {\n    \u002F\u002F optional second annotation for better type inference\n    count: 0,\n  };\n  render() {\n    return (\n      \u003Cdiv>\n        {this.props.message} {this.state.count}\n      \u003C\u002Fdiv>\n    );\n  }\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCmATzCTgFlqAFHMAZzgF44BvCuHAD0QuAFd2wAHYBzOAANpMJFEzok8uME4oANuwhwIAawFwQSduxQykALjjsYUaTIDcFAL4fyNOo2oAZRgUZW4+MzQIMSkYBykxEAAjFTdhUV1gY3oYAAttLx80XRQrOABBMDA4JAAPZSkAE05kdBgAOgBhXEgpJFiAHiZWCA4AGgDg0KQAPgjyQSdphyYpsJ5+BcF0ozAYYAgpPUckKKa4FCkpCBD9w7hMaDgUmGUoOD96aUwVfrQkMyCKIxOJwAAMZm8ZiITRUAAoAJTzbZwIgwMRQKRwOGA7YDRrAABuM1xKN4eW07TAbHY7QsVhsSE8fAptKWynawNinlJcAGQgJxNxCJ8gh55E8QA)\n\nDon't forget that you can export\u002Fimport\u002Fextend these types\u002Finterfaces for reuse.\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Why annotate \u003Ccode>state\u003C\u002Fcode> twice?\u003C\u002Fb>\u003C\u002Fsummary>\n\nIt isn't strictly necessary to annotate the `state` class property, but it allows better type inference when accessing `this.state` and also initializing the state.\n\nThis is because they work in two different ways, the 2nd generic type parameter will allow `this.setState()` to work correctly, because that method comes from the base class, but initializing `state` inside the component overrides the base implementation so you have to make sure that you tell the compiler that you're not actually doing anything different.\n\n[See commentary by @ferdaber here](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F57).\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>\u003Cb>No need for \u003Ccode>readonly\u003C\u002Fcode>\u003C\u002Fb>\u003C\u002Fsummary>\n\nYou often see sample code include `readonly` to mark props and state immutable:\n\n```tsx\ntype MyProps = {\n  readonly message: string;\n};\ntype MyState = {\n  readonly count: number;\n};\n```\n\nThis is not necessary as `React.Component\u003CP,S>` already marks them as immutable. ([See PR and discussion!](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fpull\u002F26813))\n\n\u003C\u002Fdetails>\n\n**Class Methods**: Do it like normal, but just remember any arguments for your functions also need to be typed:\n\n```tsx\nclass App extends React.Component\u003C{ message: string }, { count: number }> {\n  state = { count: 0 };\n  render() {\n    return (\n      \u003Cdiv onClick={() => this.increment(1)}>\n        {this.props.message} {this.state.count}\n      \u003C\u002Fdiv>\n    );\n  }\n  increment = (amt: number) => {\n    \u002F\u002F like this\n    this.setState((state) => ({\n      count: state.count + amt,\n    }));\n  };\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeAN5wQSBigDmSAFxw6MKMB5q4AXwA0cRWggBXHjG09rIAEZIoJgHwWKcHTBTccAC8FnBWtvZwAAwmANw+cET8bgAUAJTe5L6+RDDWUDxwKQnZcLJ8wABucBA8YtTAaADWQfLpwV4wABbAdCIGaETKdikAjGnGHiWlFt29ImA4YH3KqhrGsz19ugFIIuF2xtO+sgD0FZVTWdlp8ddH1wNDMsFFKCCRji5uGUFe8tNTqc4A0mkg4HM6NNISI6EgYABlfzcFI7QJ-IoA66lA6RNF7XFwADUcHeMGmxjStwSxjuxiAA)\n\n**Class Properties**: If you need to declare class properties for later use, define them directly within the class `body` without an initial assignment:\n\n```tsx\nclass App extends React.Component\u003C{\n  message: string;\n}> {\n  pointer: number; \u002F\u002F like this\n  componentDidMount() {\n    this.pointer = 3;\n  }\n  render() {\n    return (\n      \u003Cdiv>\n        {this.props.message} and {this.pointer}\n      \u003C\u002Fdiv>\n    );\n  }\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeAN4U4cEEgYoA5kgBccOjCjAeGgNwUAvgD44i8sshHuUXTwCuIAEZIoJuAHo-OGpgAGskOBgAC2A6JTg0SQhpHhgAEWA+AFkIVxSACgBKGzjlKJiRBxTvOABeOABmMzs4cziifm9C4ublIhhXKB44PJLlOFk+YAA3S1GxmzK6CpwwJdV1LXM4FH4F6KXKp1aesdk-SZnRgqblY-MgA)\n\n[Something to add? File an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew).\n\n#### Typing getDerivedStateFromProps\n\nBefore you start using `getDerivedStateFromProps`, please go through the [documentation](https:\u002F\u002Freactjs.org\u002Fdocs\u002Freact-component.html#static-getderivedstatefromprops) and [You Probably Don't Need Derived State](https:\u002F\u002Freactjs.org\u002Fblog\u002F2018\u002F06\u002F07\u002Fyou-probably-dont-need-derived-state.html). Derived State can be implemented using hooks which can also help set up memoization.\n\nHere are a few ways in which you can annotate `getDerivedStateFromProps`\n\n1. If you have explicitly typed your derived state and want to make sure that the return value from `getDerivedStateFromProps` conforms to it.\n\n```tsx\nclass Comp extends React.Component\u003CProps, State> {\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State\n  ): Partial\u003CState> | null {\n    \u002F\u002F\n  }\n}\n```\n\n2. When you want the function's return value to determine your state.\n\n```tsx\nclass Comp extends React.Component\u003C\n  Props,\n  ReturnType\u003Ctypeof Comp[\"getDerivedStateFromProps\"]>\n> {\n  static getDerivedStateFromProps(props: Props) {}\n}\n```\n\n3. When you want derived state with other state fields and memoization\n\n```tsx\ntype CustomValue = any;\ninterface Props {\n  propA: CustomValue;\n}\ninterface DefinedState {\n  otherStateField: string;\n}\ntype State = DefinedState & ReturnType\u003Ctypeof transformPropsToState>;\nfunction transformPropsToState(props: Props) {\n  return {\n    savedPropA: props.propA, \u002F\u002F save for memoization\n    derivedState: props.propA,\n  };\n}\nclass Comp extends React.PureComponent\u003CProps, State> {\n  constructor(props: Props) {\n    super(props);\n    this.state = {\n      otherStateField: \"123\",\n      ...transformPropsToState(props),\n    };\n  }\n  static getDerivedStateFromProps(props: Props, state: State) {\n    if (isEqual(props.propA, state.savedPropA)) return null;\n    return transformPropsToState(props);\n  }\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWOYAZwFEBHAVxQBs5tcD2IATFHQAWAOnpJWHMuQowAnmCRwAwizoxcANQ4tlAXjgoAdvIDcFYMZhIomdMoAKOMHTgBvCnDhgXAQQAuVXVNEB12PQtyAF9La1t7NGUAESRMKyR+AGUYFBsPLzgIGGFbHLykADFgJHZ+II0oKwBzKNjyBSU4cvzDVPTjTJ7lADJEJBgWKGMAFUUkAB5OpAhMOBgoEzpMaBBnCFcZiGGAPijMFmMMYAhjdc3jbd39w+PcmwAKXwO6IJe6ACUBXI3iIk2mwO83joKAAbpkXoEfC46KJvmA-AAaOAAehxcBh8K40DgICQIAgwAAXnkbsZCt5+LZgPDsu8kEF0aj0X5CtE2hQ0OwhG4VLgwHAkAAPGzGfhuZDoGCiRxTJBi8C3JDWBb-bGnSFwNC3RosDDQL4ov4ooGeEFQugsJRQS0-AFRKHrYT0UQaCpwQx2z3eYqlKDDaq1epwABEAEYAEwAZhjmIZUNEmY2Wx2UD2KKOw1drgB6f5fMKfpgwDQcGaE1STVZEZw+Z+xd+cD1BPZQWGtvTwDWH3ozDY7A7aP82KrSF9cIR-gBQLBUzuxhY7HYHqhq4h2ceubbryLXPdFZiQA)\n\n\u003C!--END-SECTION:class-components-->\n\n\u003C!--START-SECTION:default-props-->\n\n#### You May Not Need `defaultProps`\n\nAs per [this tweet](https:\u002F\u002Ftwitter.com\u002Fdan_abramov\u002Fstatus\u002F1133878326358171650), defaultProps will eventually be deprecated. You can check the discussions here:\n\n- [Original tweet](https:\u002F\u002Ftwitter.com\u002Fhswolff\u002Fstatus\u002F1133759319571345408)\n- More info can also be found in [this article](https:\u002F\u002Fmedium.com\u002F@matanbobi\u002Freact-defaultprops-is-dying-whos-the-contender-443c19d9e7f1)\n\nThe consensus is to use object default values.\n\nFunction Components:\n\n```tsx\ntype GreetProps = { age?: number };\n\nconst Greet = ({ age = 21 }: GreetProps) => \u002F\u002F etc\n```\n\nClass Components:\n\n```tsx\ntype GreetProps = {\n  age?: number;\n};\n\nclass Greet extends React.Component\u003CGreetProps> {\n  render() {\n    const { age = 21 } = this.props;\n    \u002F*...*\u002F\n  }\n}\n\nlet el = \u003CGreet age={3} \u002F>;\n```\n\n#### Typing `defaultProps`\n\nType inference improved greatly for `defaultProps` in [TypeScript 3.0+](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Frelease-notes\u002Ftypescript-3-0.html), although [some edge cases are still problematic](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F61).\n\n**Function Components**\n\n```tsx\n\u002F\u002F using typeof as a shortcut; note that it hoists!\n\u002F\u002F you can also declare the type of DefaultProps if you choose\n\u002F\u002F e.g. https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F415#issuecomment-841223219\ntype GreetProps = { age: number } & typeof defaultProps;\n\nconst defaultProps = {\n  age: 21,\n};\n\nconst Greet = (props: GreetProps) => {\n  \u002F\u002F etc\n};\nGreet.defaultProps = defaultProps;\n```\n\n_[See this in TS Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay?#code\u002FJYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdMAnmFnAOKVYwAKxY6ALxwA3igDmWAFxwAdgFcQAIyxQ4AXzgAyOM1YQCcACZYCyeQBte-VPVwRZqeCbOXrEAXGEi6cCdLgAJgBGABo6dXo6e0d4TixuLzgACjAbGXjuPg9UAEovAD5RXzhKGHkoWTgAHiNgADcCkTScgDpkSTgAeiQFZVVELvVqrrrGiPpMmFaXcytsz2FZtwXbOiA)_\n\nFor **Class components**, there are [a couple ways to do it](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fpull\u002F103#issuecomment-481061483) (including using the `Pick` utility type) but the recommendation is to \"reverse\" the props definition:\n\n```tsx\ntype GreetProps = typeof Greet.defaultProps & {\n  age: number;\n};\n\nclass Greet extends React.Component\u003CGreetProps> {\n  static defaultProps = {\n    age: 21,\n  };\n  \u002F*...*\u002F\n}\n\n\u002F\u002F Type-checks! No type assertions needed!\nlet el = \u003CGreet age={3} \u002F>;\n```\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>\u003Ccode>React.JSX.LibraryManagedAttributes\u003C\u002Fcode> nuance for library authors\u003C\u002Fb>\u003C\u002Fsummary>\n\nThe above implementations work fine for App creators, but sometimes you want to be able to export `GreetProps` so that others can consume it. The problem here is that the way `GreetProps` is defined, `age` is a required prop when it isn't because of `defaultProps`.\n\nThe insight to have here is that [`GreetProps` is the _internal_ contract for your component, not the _external_, consumer facing contract](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F66#issuecomment-453878710). You could create a separate type specifically for export, or you could make use of the `React.JSX.LibraryManagedAttributes` utility:\n\n```tsx\n\u002F\u002F internal contract, should not be exported out\ntype GreetProps = {\n  age: number;\n};\n\nclass Greet extends Component\u003CGreetProps> {\n  static defaultProps = { age: 21 };\n}\n\n\u002F\u002F external contract\nexport type ApparentGreetProps = React.JSX.LibraryManagedAttributes\u003C\n  typeof Greet,\n  GreetProps\n>;\n```\n\nThis will work properly, although hovering over`ApparentGreetProps`may be a little intimidating. You can reduce this boilerplate with the`ComponentProps` utility detailed below.\n\n\u003C\u002Fdetails>\n\n#### Consuming Props of a Component with defaultProps\n\nA component with `defaultProps` may seem to have some required props that actually aren't.\n\n##### Problem Statement\n\nHere's what you want to do:\n\n```tsx\ninterface IProps {\n  name: string;\n}\nconst defaultProps = {\n  age: 25,\n};\nconst GreetComponent = ({ name, age }: IProps & typeof defaultProps) => (\n  \u003Cdiv>{`Hello, my name is ${name}, ${age}`}\u003C\u002Fdiv>\n);\nGreetComponent.defaultProps = defaultProps;\n\nconst TestComponent = (props: React.ComponentProps\u003Ctypeof GreetComponent>) => {\n  return \u003Ch1 \u002F>;\n};\n\n\u002F\u002F Property 'age' is missing in type '{ name: string; }' but required in type '{ age: number; }'\nconst el = \u003CTestComponent name=\"foo\" \u002F>;\n```\n\n##### Solution\n\nDefine a utility that applies `React.JSX.LibraryManagedAttributes`:\n\n```tsx\ntype ComponentProps\u003CT> = T extends\n  | React.ComponentType\u003Cinfer P>\n  | React.Component\u003Cinfer P>\n  ? React.JSX.LibraryManagedAttributes\u003CT, P>\n  : never;\n\nconst TestComponent = (props: ComponentProps\u003Ctypeof GreetComponent>) => {\n  return \u003Ch1 \u002F>;\n};\n\n\u002F\u002F No error\nconst el = \u003CTestComponent name=\"foo\" \u002F>;\n```\n\n[_See this in TS Playground_](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay?#code\u002FJYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdMAnmFnAMImQB2W3MABWJhUAHgAqAPjgBeOOLhYAHjD4ATdNjwwAdJ3ARe-cSyyjg3AlihwB0gD6Yqu-Tz4xzl67cl04cAH44ACkAZQANHQAZYAAjKGQoJgBZZG5kAHMsNQBBGBgoOIBXVTFxABofPzgALjheADdrejoLVSgCPDYASSEIETgAb2r0kCw61AKLDPoAXzpcQ0m4NSxOooAbQWF0OWH-TPG4ACYAVnK6WfpF7mWAcUosGFdDd1k4AApB+uQxysO4LM6r0dnAAGRwZisCAEFZrZCbbb9VAASlk0g+1VEamADUkgwABgAJLAbDYQSogJg-MZwYDoAAkg1GWFmlSZh1mBNmogA9Di8XQUfQHlgni8jLpVustn0BnJpQjZTsWrzeXANsh2gwbstxFhJhK3nIPmAdnUjfw5WIoVgYXBReKuK9+JI0TJpPs4JQYEUoNw4KIABYARjgvN8VwYargADkIIooMQoAslvBSe8JAbns7JTSsDIyAQIBAyOHJDQgA)\n\n#### Misc Discussions and Knowledge\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Why does \u003Ccode>React.FC\u003C\u002Fcode> break \u003Ccode>defaultProps\u003C\u002Fcode>?\u003C\u002Fb>\u003C\u002Fsummary>\n\nYou can check the discussions here:\n\n- https:\u002F\u002Fmedium.com\u002F@martin_hotell\u002F10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680\n- https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fissues\u002F30695\n- https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F87\n\nThis is just the current state and may be fixed in future.\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>TypeScript 2.9 and earlier\u003C\u002Fb>\u003C\u002Fsummary>\n\nFor TypeScript 2.9 and earlier, there's more than one way to do it, but this is the best advice we've yet seen:\n\n```ts\ntype Props = Required\u003Ctypeof MyComponent.defaultProps> & {\n  \u002F* additional props here *\u002F\n};\n\nexport class MyComponent extends React.Component\u003CProps> {\n  static defaultProps = {\n    foo: \"foo\",\n  };\n}\n```\n\nOur former recommendation used the `Partial type` feature in TypeScript, which means that the current interface will fulfill a partial version on the wrapped interface. In that way we can extend defaultProps without any changes in the types!\n\n```ts\ninterface IMyComponentProps {\n  firstProp?: string;\n  secondProp: IPerson[];\n}\n\nexport class MyComponent extends React.Component\u003CIMyComponentProps> {\n  public static defaultProps: Partial\u003CIMyComponentProps> = {\n    firstProp: \"default\",\n  };\n}\n```\n\nThe problem with this approach is it causes complex issues with the type inference working with `React.JSX.LibraryManagedAttributes`. Basically it causes the compiler to think that when creating a JSX expression with that component, that all of its props are optional.\n\n[See commentary by @ferdaber here](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F57) and [here](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F61).\n\n\u003C\u002Fdetails>\n\n[Something to add? File an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew).\n\n\u003C!--END-SECTION:default-props-->\n\n\u003C!--START-SECTION:basic-type-examples-->\n\n#### Typing Component Props\n\nThis is intended as a basic orientation and reference for React developers familiarizing with TypeScript.\n\n#### Basic Prop Types Examples\n\nA list of TypeScript types you will likely use in a React+TypeScript app:\n\n```tsx\ntype AppProps = {\n  message: string;\n  count: number;\n  disabled: boolean;\n  \u002F** array of a type! *\u002F\n  names: string[];\n  \u002F** string literals to specify exact string values, with a union type to join them together *\u002F\n  status: \"waiting\" | \"success\";\n  \u002F** an object with known properties (but could have more at runtime) *\u002F\n  obj: {\n    id: string;\n    title: string;\n  };\n  \u002F** array of objects! (common) *\u002F\n  objArr: {\n    id: string;\n    title: string;\n  }[];\n  \u002F** any non-primitive value - can't access any properties (NOT COMMON but useful as placeholder) *\u002F\n  obj2: object;\n  \u002F** an interface with no required properties - (NOT COMMON, except for things like `React.Component\u003C{}, State>`) *\u002F\n  obj3: {};\n  \u002F** a dict object with any number of properties of the same type *\u002F\n  dict1: {\n    [key: string]: MyTypeHere;\n  };\n  dict2: Record\u003Cstring, MyTypeHere>; \u002F\u002F equivalent to dict1\n  \u002F** function that doesn't take or return anything (VERY COMMON) *\u002F\n  onClick: () => void;\n  \u002F** function with named prop (VERY COMMON) *\u002F\n  onChange: (id: number) => void;\n  \u002F** function type syntax that takes an event (VERY COMMON) *\u002F\n  onChange: (event: React.ChangeEvent\u003CHTMLInputElement>) => void;\n  \u002F** alternative function type syntax that takes an event (VERY COMMON) *\u002F\n  onClick(event: React.MouseEvent\u003CHTMLButtonElement>): void;\n  \u002F** any function as long as you don't invoke it (not recommended) *\u002F\n  onSomething: Function;\n  \u002F** an optional prop (VERY COMMON!) *\u002F\n  optional?: OptionalType;\n  \u002F** when passing down the state setter function returned by `useState` to a child component. `number` is an example, swap out with whatever the type of your state *\u002F\n  setState: React.Dispatch\u003CReact.SetStateAction\u003Cnumber>>;\n};\n```\n\n##### `object` as the non-primitive type\n\n`object` is a common source of misunderstanding in TypeScript. It does not mean \"any object\" but rather \"any non-primitive type\", which means it represents anything that is not `number`, `bigint`, `string`, `boolean`, `symbol`, `null` or `undefined`.\n\nTyping \"any non-primitive value\" is most likely not something that you should do much in React, which means you will probably not use `object` much.\n\n##### Empty interface, `{}` and `Object`\n\nAn empty interface, `{}` and `Object` all represent \"any non-nullish value\"—not \"an empty object\" as you might think. [Using these types is a common source of misunderstanding and is not recommended](https:\u002F\u002Ftypescript-eslint.io\u002Frules\u002Fno-empty-interface\u002F).\n\n```ts\ninterface AnyNonNullishValue {} \u002F\u002F equivalent to `type AnyNonNullishValue = {}` or `type AnyNonNullishValue = Object`\n\nlet value: AnyNonNullishValue;\n\n\u002F\u002F these are all fine, but might not be expected\nvalue = 1;\nvalue = \"foo\";\nvalue = () => alert(\"foo\");\nvalue = {};\nvalue = { foo: \"bar\" };\n\n\u002F\u002F these are errors\nvalue = undefined;\nvalue = null;\n```\n\n#### Useful React Prop Type Examples\n\nRelevant for components that accept other React components as props.\n\n```tsx\nexport declare interface AppProps {\n  children?: React.ReactNode; \u002F\u002F best, accepts everything React can render\n  childrenElement: React.JSX.Element; \u002F\u002F A single React element\n  style?: React.CSSProperties; \u002F\u002F to pass through style props\n  onChange?: React.FormEventHandler\u003CHTMLInputElement>; \u002F\u002F form events! the generic parameter is the type of event.target\n  \u002F\u002F  more info: https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002Fdocs\u002Fadvanced\u002Fpatterns_by_usecase\u002F#wrappingmirroring\n  props: Props & React.ComponentPropsWithoutRef\u003C\"button\">; \u002F\u002F to impersonate all the props of a button element and explicitly not forwarding its ref\n  props2: Props & React.ComponentPropsWithRef\u003CMyButtonWithForwardRef>; \u002F\u002F to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref\n}\n```\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Small \u003Ccode>React.ReactNode\u003C\u002Fcode> edge case before React 18\u003C\u002Fb>\u003C\u002Fsummary>\n\nBefore the [React 18 type updates](https:\u002F\u002Fgithub.com\u002FDefinitelyTyped\u002FDefinitelyTyped\u002Fpull\u002F56210), this code typechecked but had a runtime error:\n\n```tsx\ntype Props = {\n  children?: React.ReactNode;\n};\n\nfunction Comp({ children }: Props) {\n  return \u003Cdiv>{children}\u003C\u002Fdiv>;\n}\nfunction App() {\n  \u002F\u002F Before React 18: Runtime error \"Objects are not valid as a React child\"\n  \u002F\u002F After React 18: Typecheck error \"Type '{}' is not assignable to type 'ReactNode'\"\n  return \u003CComp>{{}}\u003C\u002FComp>;\n}\n```\n\nThis is because `ReactNode` includes `ReactFragment` which allowed type `{}` before React 18.\n\n[Thanks @pomle for raising this.](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F357)\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n \u003Csummary>\u003Cb>React.JSX.Element vs React.ReactNode?\u003C\u002Fb>\u003C\u002Fsummary>\n\nQuote [@ferdaber](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F57): A more technical explanation is that a valid React node is not the same thing as what is returned by `React.createElement`. Regardless of what a component ends up rendering, `React.createElement` always returns an object, which is the `React.JSX.Element` interface, but `React.ReactNode` is the set of all possible return values of a component.\n\n- `React.JSX.Element` -> Return value of `React.createElement`\n- `React.ReactNode` -> Return value of a component\n\n\u003C\u002Fdetails>\n\n[More discussion: Where ReactNode does not overlap with React.JSX.Element](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002F129)\n\n[Something to add? File an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew).\n\n#### Types or Interfaces?\n\nYou can use either Types or Interfaces to type Props and State, so naturally the question arises - which do you use?\n\n##### TL;DR\n\nUse Interface until You Need Type - [orta](https:\u002F\u002Ftwitter.com\u002Forta\u002Fstatus\u002F1356129195835973632?s=20).\n\n##### More Advice\n\nHere's a helpful rule of thumb:\n\n- always use `interface` for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via _declaration merging_ if some definitions are missing.\n\n- consider using `type` for your React Component Props and State, for consistency and because it is more constrained.\n\nYou can read more about the reasoning behind this rule of thumb in [Interface vs Type alias in TypeScript 2.7](https:\u002F\u002Fmedium.com\u002F@martin_hotell\u002Finterface-vs-type-alias-in-typescript-2-7-2a8f1777af4c).\n\nThe TypeScript Handbook now also includes guidance on [Differences Between Type Aliases and Interfaces](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Feveryday-types.html#differences-between-type-aliases-and-interfaces).\n\n> Note: At scale, there are performance reasons to prefer interfaces ([see official Microsoft notes on this](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTypeScript\u002Fwiki\u002FPerformance#preferring-interfaces-over-intersections)) but [take this with a grain of salt](https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=25201887)\n\nTypes are useful for union types (e.g. `type MyType = TypeA | TypeB`) whereas Interfaces are better for declaring dictionary shapes and then `implementing` or `extending` them.\n\n##### Useful table for Types vs Interfaces\n\nIt's a nuanced topic, don't get too hung up on it. Here's a handy table:\n\n| Aspect                                          | Type | Interface |\n| ----------------------------------------------- | :--: | :-------: |\n| Can describe functions                          |  ✅  |    ✅     |\n| Can describe constructors                       |  ✅  |    ✅     |\n| Can describe tuples                             |  ✅  |    ✅     |\n| Interfaces can extend it                        |  ⚠️  |    ✅     |\n| Classes can extend it                           |  🚫  |    ✅     |\n| Classes can implement it (`implements`)         |  ⚠️  |    ✅     |\n| Can intersect another one of its kind           |  ✅  |    ⚠️     |\n| Can create a union with another one of its kind |  ✅  |    🚫     |\n| Can be used to create mapped types              |  ✅  |    🚫     |\n| Can be mapped over with mapped types            |  ✅  |    ✅     |\n| Expands in error messages and logs              |  ✅  |    🚫     |\n| Can be augmented                                |  🚫  |    ✅     |\n| Can be recursive                                |  ⚠️  |    ✅     |\n\n⚠️ In some cases\n\n(source: [Karol Majewski](https:\u002F\u002Ftwitter.com\u002Fkaroljmajewski\u002Fstatus\u002F1082413696075382785))\n\n[Something to add? File an issue](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fissues\u002Fnew).\n\n\u003C!--END-SECTION:basic-type-examples-->\n\n\u003C!--START-SECTION:get-derived-state-from-props-->\n\n## getDerivedStateFromProps\n\nBefore you start using `getDerivedStateFromProps`, please go through the [documentation](https:\u002F\u002Freactjs.org\u002Fdocs\u002Freact-component.html#static-getderivedstatefromprops) and [You Probably Don't Need Derived State](https:\u002F\u002Freactjs.org\u002Fblog\u002F2018\u002F06\u002F07\u002Fyou-probably-dont-need-derived-state.html). Derived State can be easily achieved using hooks which can also help set up memoization easily.\n\nHere are a few ways in which you can annotate `getDerivedStateFromProps`\n\n1. If you have explicitly typed your derived state and want to make sure that the return value from `getDerivedStateFromProps` conforms to it.\n\n```tsx\nclass Comp extends React.Component\u003CProps, State> {\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State\n  ): Partial\u003CState> | null {\n    \u002F\u002F\n  }\n}\n```\n\n2. When you want the function's return value to determine your state.\n\n```tsx\nclass Comp extends React.Component\u003C\n  Props,\n  ReturnType\u003Ctypeof Comp[\"getDerivedStateFromProps\"]>\n> {\n  static getDerivedStateFromProps(props: Props) {}\n}\n```\n\n3. When you want derived state with other state fields and memoization\n\n```tsx\ntype CustomValue = any;\ninterface Props {\n  propA: CustomValue;\n}\ninterface DefinedState {\n  otherStateField: string;\n}\ntype State = DefinedState & ReturnType\u003Ctypeof transformPropsToState>;\nfunction transformPropsToState(props: Props) {\n  return {\n    savedPropA: props.propA, \u002F\u002F save for memoization\n    derivedState: props.propA,\n  };\n}\nclass Comp extends React.PureComponent\u003CProps, State> {\n  constructor(props: Props) {\n    super(props);\n    this.state = {\n      otherStateField: \"123\",\n      ...transformPropsToState(props),\n    };\n  }\n  static getDerivedStateFromProps(props: Props, state: State) {\n    if (isEqual(props.propA, state.savedPropA)) return null;\n    return transformPropsToState(props);\n  }\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWOYAZwFEBHAVxQBs5tcD2IATFHQAWAOnpJWHMuQowAnmCRwAwizoxcANQ4tlAXjgoAdvIDcFYMZhIomdMoAKOMHTgBvCnDhgXAQQAuVXVNEB12PQtyAF9La1t7NGUAESRMKyR+AGUYFBsPLzgIGGFbHLykADFgJHZ+II0oKwBzKNjyBSU4cvzDVPTjTJ7lADJEJBgWKGMAFUUkAB5OpAhMOBgoEzpMaBBnCFcZiGGAPijMFmMMYAhjdc3jbd39w+PcmwAKXwO6IJe6ACUBXI3iIk2mwO83joKAAbpkXoEfC46KJvmA-AAaOAAehxcBh8K40DgICQIAgwAAXnkbsZCt5+LZgPDsu8kEF0aj0X5CtE2hQ0OwhG4VLgwHAkAAPGzGfhuZDoGCiRxTJBi8C3JDWBb-bGnSFwNC3RosDDQL4ov4ooGeEFQugsJRQS0-AFRKHrYT0UQaCpwQx2z3eYqlKDDaq1epwABEAEYAEwAZhjmIZUNEmY2Wx2UD2KKOw1drgB6f5fMKfpgwDQcGaE1STVZEZw+Z+xd+cD1BPZQWGtvTwDWH3ozDY7A7aP82KrSF9cIR-gBQLBUzuxhY7HYHqhq4h2ceubbryLXPdFZiQA)\n\n\u003C!--END-SECTION:get-derived-state-from-props-->\n\n\u003C!--START-SECTION:forms-and-events-->\n\n#### Forms and Events\n\nIf performance is not an issue (and it usually isn't!), inlining handlers is easiest as you can just use [type inference and contextual typing](https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002Ftype-inference.html#contextual-typing):\n\n```tsx\nconst el = (\n  \u003Cbutton\n    onClick={(event) => {\n      \u002F* event will be correctly typed automatically! *\u002F\n    }}\n  \u002F>\n);\n```\n\nBut if you need to define your event handler separately, IDE tooling really comes in handy here, as the @type definitions come with a wealth of typing. Type what you are looking for and usually the autocomplete will help you out. Here is what it looks like for an `onChange` for a form event:\n\n```tsx\ntype State = {\n  text: string;\n};\nclass App extends React.Component\u003CProps, State> {\n  state = {\n    text: \"\",\n  };\n\n  \u002F\u002F typing on RIGHT hand side of =\n  onChange = (e: React.FormEvent\u003CHTMLInputElement>): void => {\n    this.setState({ text: e.currentTarget.value });\n  };\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cinput type=\"text\" value={this.state.text} onChange={this.onChange} \u002F>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeCnDgBvAL4AaBcs2KA9Drg8IcMDjB1tcblwBccOjCjAeAcwDcmlRQB8W8ovso3HAAvL6KilYwtgBE0R7ulH5wepYAnmBOznAQPIgAkgDiABIAKnAAFij8dsB8SNmYIZo5YpUu9aEAFEi2QhgiAGLQIACiAG4ysqUAsgAyeTxgAK4wI9RIIDJeAJS2YxC1IT5KFjDlwHQidEgwAMowgUidSpacUewiaEtQRDwwJSgoM4biIxihqEt6iptglFCpYXBfnUoJ1tmFwkQYN9cp0LIpZHxgGMvHjwrInMt4DB0khgtFItE4GCIbSlGcLlcHtwRJEVNkeK0qsDgmzzpcWm1gXydCSkuE4LIdITiRYYR4KCogA)\n\nInstead of typing the arguments and return values with `React.FormEvent\u003C>` and `void`, you may alternatively apply types to the event handler itself (_contributed by @TomasHubelbauer_):\n\n```tsx\n  \u002F\u002F typing on LEFT hand side of =\n  onChange: React.ChangeEventHandler\u003CHTMLInputElement> = (e) => {\n    this.setState({text: e.currentTarget.value})\n  }\n```\n\n\u003Cdetails>\n\n\u003Csummary>\u003Cb>Why two ways to do the same thing?\u003C\u002Fb>\u003C\u002Fsummary>\n\nThe first method uses an inferred method signature `(e: React.FormEvent\u003CHTMLInputElement>): void` and the second method enforces a type of the delegate provided by `@types\u002Freact`. So `React.ChangeEventHandler\u003C>` is simply a \"blessed\" typing by `@types\u002Freact`, whereas you can think of the inferred method as more... _artisanally hand-rolled_. Either way it's a good pattern to know. [See our Github PR for more](https:\u002F\u002Fgithub.com\u002Ftypescript-cheatsheets\u002Freact\u002Fpull\u002F24).\n\n\u003C\u002Fdetails>\n\n> Starting with React v19.2.10 `FormEvent` and `FormEventHandler` are deprecated and should be replaced with `SubmitEvent` and `SubmitEventHandler`. The older event types will still work but trigger a deprecation message.\n\n**Typing onSubmit, with Uncontrolled components in a Form**\n\nIf you don't quite care about the type of the event, you can just use `React.SyntheticEvent`. If your target form has custom named inputs that you'd like to access, you can use a type assertion:\n\n```tsx\n\u003Cform\n  ref={formRef}\n  onSubmit={(e: React.SyntheticEvent) => {\n    e.preventDefault();\n    const target = e.target as typeof e.target & {\n      email: { value: string };\n      password: { value: string };\n    };\n    const email = target.email.value; \u002F\u002F typechecks!\n    const password = target.password.value; \u002F\u002F typechecks!\n    \u002F\u002F etc...\n  }}\n>\n  \u003Cdiv>\n    \u003Clabel>\n      Email:\n      \u003Cinput type=\"email\" name=\"email\" \u002F>\n    \u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Clabel>\n      Password:\n      \u003Cinput type=\"password\" name=\"password\" \u002F>\n    \u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Cinput type=\"submit\" value=\"Log in\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n[View in the TypeScript Playground](https:\u002F\u002Fwww.typescriptlang.org\u002Fplay\u002F?jsx=2#code\u002FJYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGctoRlM4BeRYmAOgFc6kLABQBKClVoM4AMSbs4o9gD4FFOHAA8mJmrhFMbAN7aozJJgC+u2gGVeAIxDAYRoUgBcndDxsBPGjAAFkgwwGgAogBuSAEiynCGuupI3GBE0QEAIuYovAA2MKIA3Elw1PTwMChQAOYh8ilVtfUodHAwvmBIEKyN1XXwAGQJpckgKMB5noZwkSh5vB5wDFDANDVwFiXk6rtwYK10AO7QACbTs-OLnitrG1ulDzu75VJI45PyTQPc7xN53DmCyQRTgAHowe1Okg0ME0ABrOgAQlKr3gBzoxzOX36IVShxOUFOgKuIPBkI6XVhMMRKOe6ghcBCaG4rN0Fis5CUug0p2AkW59M0eRQ9iQeUFe3U4Q+U1GmjWYF4lWhbAARH9Jmq4DQUCAkOrNXltWDJbsNGCRWKJTywXyBTz7Wb1BoreLnbsAAoEs7ueUaRXKqFddUYrFE7W6-Whn0R8Eei1um3PC1Ox38hOBlUhtV0BxOGDaoGLdUAGQgGzWJrNqYzFAtJhAgpEQA)\n\nOf course, if you're making any sort of significant form, [you should use Formik](https:\u002F\u002Fjaredpalmer.com\u002Fformik) or [React Hook Form](https:\u002F\u002Freact-hook-form.com\u002F), which are written in TypeScript.\n\n##### List of event types\n\n| Event Type       | Description                                                                                                                                                                                                                                                            |\n| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| AnimationEvent   | CSS Animations.                                                                                                                                                                                                                                                        |\n| ChangeEvent      | Changing the value of `\u003Cinput>`, `\u003Cselect>` and `\u003Ctextarea>` element.                                                                                                                                                                                                  |\n| ClipboardEvent   | Using copy, paste and cut events.                                                                                                                                                                                                                                      |\n| 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)                                                           |\n| DragEvent        | Drag and drop interaction with a pointer device (e.g. mouse).                                                                                                                                                                                                          |\n| FocusEvent       | Event that occurs when elements gets or loses focus.                                                                                                                                                                                                                   |\n| FormEvent        | Event that occurs whenever a form or form element gets\u002Floses focus, a form element value is changed or the form is submitted.                                                                                                                                          |\n| InvalidEvent     | Fired when validity restrictions of an input fails (e.g `\u003Cinput type=\"number\" max=\"10\">` and someone would insert number 20).                                                                                                                                          |\n| KeyboardEvent    | User interaction with the keyboard. Each event describes a single key interaction.                                                                                                                                                                                     |\n| InputEvent       | Event that occurs before the value of `\u003Cinput>`, `\u003Cselect>` and `\u003Ctextarea>` changes.                                                                                                                                                                                  |\n| MouseEvent       | Events that occur due to the user interacting with a pointing device (e.g. mouse)                                                                                                                                                                                      |\n| PointerEvent     | Events that occur due to user interaction with a variety pointing of devices such as mouse, pen\u002Fstylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent. |\n| TouchEvent       | Events that occur due to the user interacting with a touch device. Extends UIEvent.                                                                                                                                                                                    |\n| TransitionEvent  | CSS Transition. Not fully browser supported. Extends UIEvent                                                                                                                                                        ","该项目为有经验的React开发者提供了一份详尽的TypeScript使用指南。核心功能包括基础和高级TypeScript与React集成教程、迁移指南以及高阶组件编写技巧，旨在通过实际示例和最佳实践帮助开发者快速上手或深入理解TypeScript在React项目中的应用。特别适合于希望在其React应用程序中引入TypeScript以增强类型安全性和代码可维护性的前端工程师，同时也为那些想要充分利用TypeScript特性来开发复用性强的库或组件的高级用户提供指导。","2026-06-11 02:39:41","top_all"]