TypeScript with React Cheat Sheet

Covers typing React function components, useState/useReducer generics, DOM and synthetic event types, useRef and forwardRef, and common utility types.

2 PagesIntermediateMar 18, 2026

Typing Function Components

A props interface with an optional union prop.

typescript

interface ButtonProps {  label: string;  onClick: () => void;  variant?: 'primary' | 'secondary'; // optional prop with a union type  children?: React.ReactNode;}function Button({ label, onClick, variant = 'primary', children }: ButtonProps) {  return (    <button className={`btn-${variant}`} onClick={onClick}>      {label}      {children}    </button>  );}

useState & useReducer Generics

Explicit typing when inference isn't enough.

typescript

// Explicit generic when the initial value doesn't convey the full typeconst [user, setUser] = useState<User | null>(null);const [count, setCount] = useState(0); // inferred as number// useReducer with a discriminated union of actionstype Action =  | { type: 'increment'; payload: number }  | { type: 'reset' };function reducer(state: number, action: Action): number {  switch (action.type) {    case 'increment': return state + action.payload;    case 'reset': return 0;  }}const [state, dispatch] = useReducer(reducer, 0);

Typing Events

Synthetic event types for common handlers.

typescript

function SearchInput() {  const [value, setValue] = useState('');  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {    setValue(e.target.value);  };  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {    e.preventDefault();  };  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {    console.log('clicked', e.currentTarget);  };  return (    <form onSubmit={handleSubmit}>      <input value={value} onChange={handleChange} />      <button onClick={handleClick}>Go</button>    </form>  );}

useRef & forwardRef

DOM refs, mutable value refs, and ref forwarding.

typescript

// DOM ref: initialize with null, TS narrows to HTMLInputElement | nullconst inputRef = useRef<HTMLInputElement>(null);useEffect(() => { inputRef.current?.focus(); }, []);// Mutable value ref (no DOM node): initialize with the value directlyconst renderCount = useRef(0);renderCount.current += 1;// forwardRef takes two generics: <RefType, PropsType>const FancyInput = forwardRef<HTMLInputElement, { placeholder?: string }>(  (props, ref) => <input ref={ref} {...props} />);

Utility Types & Patterns

Reach for these before duplicating a prop type.

React.ComponentProps<typeof Comp>- Extracts an existing component's prop types, useful for wrapper components
React.PropsWithChildren<T>- Adds an optional children: ReactNode to a props type
Partial<T> / Pick<T,K> / Omit<T,K>- Built-in TS utilities for deriving variant prop types without duplication
as const- Narrows array/object literals to readonly tuple/literal types, useful for discriminated unions
satisfies- Validates a literal against a type without widening it, handy for config objects

Pro Tip

Skip React.FC for new components — it forces an implicit children prop even when a component doesn't accept any, and makes generic components awkward to type. Just type the props argument directly: function Comp(props: Props) { ... }.

Was this cheat sheet helpful?

Redux Toolkit Cheat Sheet

CSS Custom Properties (Variables) Cheat Sheet

Explore Topics

#TypeScriptWithReact#TypeScriptWithReactCheatSheet#WebDevelopment#Intermediate#TypingFunctionComponents#UseStateUseReducerGenerics#TypingEvents#UseRefForwardRef#Functions#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services