React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started 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 | Español | Português | Contribute! | Ask!

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

---

| |

All React + TypeScript Cheatsheets

• 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>

• Section 1: Setup TypeScript with React

  <!--START-SECTION:setup-toc-->
  • Prerequisites
  • React and TypeScript starter kits
  • Try React and TypeScript online<!--END-SECTION:setup-toc-->

• Section 2: Getting Started

  • Function Components
  • Hooks
  • useState
  • 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
  • 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
  • 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

• Extended Example

• forwardRef/createRef

• Generic forwardRefs

• Option 1 - Wrapper component

• Option 2 - Redeclare forwardRef

• More Info

• Portals

• Error Boundaries

• Option 1: Using react-error-boundary

• Options 2: Writing your custom error boundary component

• Concurrent React/React Suspense

• Troubleshooting Handbook: Types

  <!--START-SECTION:types-toc-->
  • 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<!--END-SECTION:types-toc-->

• 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

  </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 online, which can be helpful for debugging or making sharable reproductions.

• TypeScript playground
• StackBlitz
• CodeSandbox

<!--END-SECTION:setup-->

Section 2: Getting Started

<!--START-SECTION:function-components-->

Function Components

These can be written as normal functions that take a props argument and return a JSX element.

// Declaring type of props - see "Typing Component Props" for more examples
type AppProps = {
  message: string;
}; /* use `interface` if exporting so that consumers can extend */

// Easiest way to declare a Function Component; return type is inferred.
const App = ({ message }: AppProps) => <div>{message}</div>;

// You can choose to annotate the return type so an error is raised if you accidentally return some other type
const App = ({ message }: AppProps): React.JSX.Element => <div>{message}</div>;

// You can also inline the type declaration; eliminates naming the prop types, but looks repetitive
const App = ({ message }: { message: string }) => <div>{message}</div>;

// Alternatively, you can use `React.FunctionComponent` (or `React.FC`), if you prefer.
// With latest React types and TypeScript 5.1. it's mostly a stylistic choice, otherwise discouraged.
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);
// or
const App: React.FC<AppProps> = ({ message }) => <div>{message}</div>;

Tip: You might use Paul Shen's VS Code Extension to automate the type destructure declaration (incl a keyboard shortcut).

<details> <summary><b>Why is <code>React.FC</code> not needed? What about <code>React.FunctionComponent</code>/<code>React.VoidFunctionComponent</code>?</b></summary>

You may see this in many React+TypeScript codebases:

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

However, 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. 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.

Some differences from the "normal function" version:

• React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).

• It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps.

  • Note that there are some known issues using defaultProps with React.FunctionComponent. See this issue for details. We maintain a separate defaultProps section you can also look up.

• Before the React 18 type updates, 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.

// before React 18 types
const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;

<details> <summary>(Deprecated)<b>Using <code>React.VoidFunctionComponent</code> or <code>React.VFC</code> instead</b></summary>

In @types/react 16.9.48, the React.VoidFunctionComponent or React.VFC type was added for typing children explicitly. However, please be aware that React.VFC and React.VoidFunctionComponent were deprecated in React 18 (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59882), so this interim solution is no longer necessary or recommended in React 18+.

Please use regular function components or React.FC instead.

type Props = { foo: string };

// OK now, in future, error
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// Error now, in future, deprecated
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {