TypeScript with React.
Where types pay off the most.

import { useState, useReducer } from 'react';

interface User { id: string; name: string }

function Profile() {
// ─── Inference — the common case ─────────────
const [count, setCount] = useState(0); // number
const [name, setName] = useState(''); // string
const [tags, setTags] = useState<string[]>([]); // empty array — annotate!

// ─── Annotated — when inference isn't enough ─
const [user, setUser] = useStatenull>(null);

function load() {
setUser({ id: '1', name: 'Alice' }); // ✅ setUser accepts User
// setUser({ id: 2 }); // ❌ type mismatch
}

return (

{count}
{user?.name ?? 'No user'}
Load

);
}

// ─── useReducer with a discriminated union ───
interface State { count: number; history: number[] }

type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'add'; by: number }
| { type: 'reset' };

function reducer(state: State, action: Action): State {
switch (action.type) {
case 'increment':
return { count: state.count + 1, history: [...state.history, state.count + 1] };
case 'decrement':
return { count: state.count - 1, history: [...state.history, state.count - 1] };
case 'add':
return { count: state.count + action.by, history: [...state.history, state.count + action.by] };
case 'reset':
return { count: 0, history: [] };
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0, history: [] });

return (

{state.count}
 dispatch({ type: 'increment' })}>+1
 dispatch({ type: 'add', by: 10 })}>+10
 dispatch({ type: 'reset' })}>Reset

{/* ❌ compile error: 'multiply' not in Action union /}
{/ dispatch({ type: 'multiply' }); */}

);
}

export { Profile, Counter };

import { useState } from 'react';

function EventDemos() {
const [text, setText] = useState('');
const [checked, setChecked] = useState(false);

// ─── Change events (inputs, selects, textareas) ─
function handleInputChange(e: React.ChangeEvent) {
setText(e.target.value); // e.target is HTMLInputElement
}

function handleCheck(e: React.ChangeEvent) {
setChecked(e.target.checked); // .checked is boolean
}

// ─── Form submit ────────────────────────────
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
console.log('Submitted');
}

// ─── Mouse events ───────────────────────────
function handleClick(e: React.MouseEvent) {
console.log('clicked at', e.clientX, e.clientY);
console.log('on button', e.currentTarget.disabled);
}

// ─── Keyboard ───────────────────────────────
function handleKey(e: React.KeyboardEvent) {
if (e.key === 'Enter') console.log('submit');
}

// ─── Focus ──────────────────────────────────
function handleFocus(e: React.FocusEvent) {
e.target.select();
}

return (



"checkbox" checked={checked} onChange={handleCheck} />
Check me

Click

);
}

// ─── The cheat sheet ──────────────────────────
// onChange: React.ChangeEvent
// onInput: React.FormEvent
// onSubmit: React.FormEvent
// onClick: React.MouseEvent
// onKeyDown: React.KeyboardEvent
// onFocus: React.FocusEvent
// onBlur: React.FocusEvent
// onScroll: React.UIEvent
// onDrag: React.DragEvent
// onWheel: React.WheelEvent
// onPointer: React.PointerEvent

export default EventDemos;

// ─── Card with children ──────────────────────
interface CardProps {
title: string;
children: React.ReactNode; // ← almost always this
}

function Card({ title, children }: CardProps) {
return (
"card">
{title}
"card-body">{children}

);
}

// ─── Flexible children accepted ──────────────
function App() {
return (

{/* String child */}
"Plain text">Just a string

{/* JSX child */}
"With JSX">
A paragraph
A button


{/* Array of elements */}
"With array">
{['a', 'b'].map(x => {x})}


{/* Null — allowed by ReactNode */}
"Empty">{null}

{/* Conditional rendering */}
"Conditional">
{true && 
Visible
}


);
}

// ─── Optional children ───────────────────────
interface OptionalCardProps {
title: string;
children?: React.ReactNode; // optional — component may render empty
}

function OptionalCard({ title, children }: OptionalCardProps) {
return (
"card">
{title}
{children && 
{children}
}

);
}

// ─── Comparison ──────────────────────────────
type A = React.ReactNode;
// string | number | bigint | boolean | null | undefined |
// ReactElement | Iterable | Promise>
// → use this for children

type B = JSX.Element;
// The narrow type for a single JSX element (e.g. 
)
// → use when you know it's exactly one element and need to inspect props

type C = React.ReactElement;
// An element with known props type, or a generic element
// → use in library types when you need to inspect children's props

export { Card, OptionalCard };

// ─── A generic List component ────────────────
interface ListProps {
items: T[];
renderItem: (item: T, index: number) => React.ReactNode;
keyExtractor?: (item: T) => string | number;
}

function List({ items, renderItem, keyExtractor }: ListProps) {
return (

{items.map((item, i) => (
keyExtractor(item) : i}>
{renderItem(item, i)}

))}

);
}

// ─── Usage: T is inferred per call ───────────
interface User { id: string; name: string }
interface Product { sku: string; title: string; price: number }

function App() {
const users: User[] = [{ id: '1', name: 'Alice' }];
const products: Product[] = [{ sku: 'X', title: 'Book', price: 10 }];

return (

{/* T = User — item is User inside the callback */}
 u.id}
renderItem={(u) => {u.name}}
/>

{/* T = Product — item is Product */}
 p.sku}
renderItem={(p) => (
{p.title} — $`{p.price}
)}
/>

{/* ❌ Errors: /}
{/ renderItem={(u) => u.nonexistent} — not on User /}
{/ items={[{ id: 1 }]} — id must be string */}

);
}

export default App;

import { useRef, forwardRef, useEffect } from 'react';

// ─── useRef — DOM element ref ────────────────
function FocusInput() {
const inputRef = useRef(null);

function focus() {
inputRef.current?.focus(); // current is HTMLInputElement | null
}

return (


Focus

);
}

// ─── useRef — mutable value ref ──────────────
function Counter() {
// A ref that holds a number, doesn't trigger re-render on change
const countRef = useRef(0);
const intervalRef = useReftypeof setInterval> | null>(null);

useEffect(() => {
intervalRef.current = setInterval(() => {
countRef.current += 1;
console.log(countRef.current);
}, 1000);

return () => {
if (intervalRef.current) clearInterval(intervalRef.current);
};
}, []);

return 
Check console
;
}

// ─── forwardRef — pass a ref through a component ─
interface FancyInputProps {
label: string;
placeholder?: string;
}

const FancyInput = forwardRef(
({ label, placeholder }, ref) => {
return (

{label}


);
}
);
FancyInput.displayName = 'FancyInput';

// ─── Using the ref from the parent ───────────
function App() {
const fancyRef = useRef(null);

function focusFancy() {
fancyRef.current?.focus();
}

return (

{/* ref is passed through to the inner input */}
"Name" placeholder="Enter…" />
Focus input

);
}

// ─── React 19: ref as a regular prop ─────────
// React 19 lets you pass ref directly without forwardRef:
interface NewInputProps {
label: string;
ref?: React.Ref;
}
function NewInput({ label, ref }: NewInputProps) {
return {label};
}
// Both patterns work. Use forwardRef for React 18 compatibility;
// use ref-as-prop for new React 19 codebases.

export default App;