React & TypeScript Pro Playbook

type Props = {
  name: string;
  role?: "admin" | "user";        // optional, and a union of allowed values
  onSelect: (id: string) => void; // typed callback
  children?: React.ReactNode;     // if it wraps content
};

function UserCard({ name, role = "user", onSelect, children }: Props) {
  return <div onClick={() => onSelect(name)}>{name} — {role}{children}</div>;
}
// callers now get autocomplete + errors for missing/wrong props

const [count, setCount] = useState(0);                   // inferred: number
const [user, setUser] = useState<User | null>(null);     // explicit union

const inputRef = useRef<HTMLInputElement>(null);          // typed DOM ref
inputRef.current?.focus();                               // .focus() is known

// typed reducer: state + action types checked
const [state, dispatch] = useReducer(reducer, initial as CartState);
dispatch({ type: "add", item });   // action shape checked against your union

// inline: TS infers e's type from the element (no annotation needed)
<input onChange={(e) => setName(e.target.value)} />   // e is ChangeEvent

// standalone handler: annotate explicitly
function onChange(e: React.ChangeEvent<HTMLInputElement>) {
  setName(e.target.value);          // .value is a typed string
}
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault(); save();
}
<form onSubmit={onSubmit}><input onChange={onChange} /></form>

const Row = React.memo(function Row({ item, onPick }) {  // skip if props equal
  return <li onClick={() => onPick(item.id)}>{item.name}</li>;
});
// props must be STABLE or memo does nothing (topic 15):
const onPick = useCallback((id) => pick(id), []);

// code splitting: load a heavy component only when needed
const Chart = lazy(() => import("./Chart"));
<Suspense fallback={<Spinner />}><Chart /></Suspense>

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(err, info) { log(err, info); }   // report it
  render() {
    return this.state.hasError ? <Fallback /> : this.props.children;
  }
}
<ErrorBoundary>
  <Suspense fallback={<Spinner />}>
    <LazyDashboard />            {/* loads async; errors caught above */}
  </Suspense>
</ErrorBoundary>

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("increments on click", async () => {
  render(<Counter />);
  await userEvent.click(screen.getByRole("button"));   // act like a user
  expect(screen.getByText("1")).toBeInTheDocument();   // assert visible result
});
// no peeking at state/props — refactor internals freely, test still holds

// ✓ accessible: real button + labeled input
<button onClick={save} disabled={!valid}>Save</button>
<label htmlFor="email">Email</label>
<input id="email" type="email" value={email} onChange={onChange} />

// manage focus for modals/routes:
useEffect(() => { closeBtnRef.current?.focus(); }, []);   // focus on open
// add ARIA only when no semantic element fits:
<div role="alert">{error}</div>                            // announces changes

// ✗ mutate → ✓ new reference
setItems([...items, x]);          // not items.push(x); setItems(items)

// ✗ derived state + effect → ✓ derive during render
const fullName = `${first} ${last}`;   // not useState + useEffect sync

// ✗ index key → ✓ stable id
{rows.map((r) => <Row key={r.id} {...r} />)}

// wrong: {n && <X/>} can render "0"  → right: boolean guard
{n > 0 && <X />}

type Props = { initialQuery?: string };

function UserList({ initialQuery = "" }: Props) {
  const [q, setQ] = useState(initialQuery);              // typed controlled (4,24)
  const { data, isLoading, error } = useQuery({          // server cache (21)
    queryKey: ["users"], queryFn: fetchUsers,
  });
  const shown = useMemo(                                 // derive (19); memo if heavy (25)
    () => (data ?? []).filter((u) => u.name.includes(q)),
    [data, q]
  );
  if (isLoading) return <Spinner />;                     // states (9)
  if (error)     return <ErrorMsg />;
  return (
    <section>
      <label htmlFor="s">Search</label>                    {/* accessible (28) */}
      <input id="s" value={q} onChange={(e) => setQ(e.target.value)} />
      {shown.length === 0
        ? <Empty />
        : <ul>{shown.map((u) => <li key={u.id}>{u.name}</li>)}</ul>}  {/* keys (8) */}
    </section>
  );
}
// wrap the tree in <ErrorBoundary> + <Suspense> (26); type every boundary (22,23,24)