React + TypeScript (light chapter)

Intentionally short. Just the bits FE React interviews usually poke at - on top of the core guide.

Assumes React 18/19 with the modern JSX transform (no need to import React just for JSX).

What you should already know

• Unions & narrowing for UI state
• Generics for data helpers
• Utility types for form/PATCH shapes

Mental model

React components are functions. Props are a typed object. State and refs need types when inference isn't enough (empty arrays, DOM refs, discriminated unions).

type HelloProps = {
  name: string
}

export function Hello({ name }: HelloProps) {
  return <p>Hello, {name}</p>
}

As you can see - nothing magical. Function in, JSX out, props typed.

Chapter map

1. Props & events - children, handlers, ComponentProps
2. Hooks typing - useState, useRef, basic custom hooks

Mini check

Question: Where do React props types usually live relative to the component?

Answer

As a type or interface next to the component (or colocated in the same file), passed as the parameter type of the function component. Prefer named props types over inline huge objects for readability.