TypeScript for React Cheat Sheet: Props, Hooks, Events & FC Types

TypeScript for React is mostly props and hook inference. Define a Props interface, destructure in the function, and let useState infer from the initial value (or pass a generic when it starts as null). Event handlers use React.ChangeEvent / MouseEvent. You do not need React.FC for children — type children yourself.

This TypeScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Props: type Props = { title: string; onSave?: () => void } then function Card({ title, onSave }: Props).
• Children: children: React.ReactNode when you accept nested JSX.
• useState: useState(0) infers number. useState<User | null>(null) when empty first.
• Events: (e: React.ChangeEvent<HTMLInputElement>) => void for inputs.
• Refs: useRef<HTMLInputElement>(null) then ref.current?.focus().
• FC: React.FC implies children and can hurt generics. Prefer a typed function.
• CSS: style?: React.CSSProperties for inline style objects.
• Context: createContext<Auth | null>(null) and a hook that throws if missing.

Copy-paste examples

Typed props, state, and an input handler

Use .tsx. Infer what you can. Export the props type if other files compose the component.

import { useState } from 'react';

type Props = {
  initial: string;
  onSubmit: (email: string) => void;
};

export function EmailForm({ initial, onSubmit }: Props) {
  const [email, setEmail] = useState(initial);
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(email);
      }}
    >
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Save</button>
    </form>
  );
}

Common mistakes

• Typing useState as any because the first render is null — use T | null.
• React.FC<Props> and then wondering why children is allowed when you did not want it.
• Importing MouseEvent from the DOM lib instead of React.MouseEvent in a handler and fighting currentTarget.
• Passing extra props through ...rest without ComponentProps<"button"> and losing native types.

FAQ

1. JSX.Element vs ReactNode? ReactNode is what children should be (includes strings, null, arrays). JSX.Element is a more specific element object.

1. Do I need PropTypes too? No. TypeScript replaces PropTypes at compile time. You still validate runtime API JSON.

1. How do I type a component that returns a list? function List(props: Props): JSX.Element is optional; inference is enough if you return JSX.

Related TypeScript cheat sheets

• Typescript Cheat Sheet 2026
• Typescript Types Interfaces Cheat Sheet
• Typescript Generics Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.