React Cheat Sheet

This page consolidates the most important React APIs, patterns, and commands from across the course into one bookmarkable quick-reference.

How to Use This Cheat Sheet

Each table below covers one area: core JSX, hooks, routing, state, and data fetching. Use it for syntax reminders during development — revisit dedicated lessons for deeper explanations.

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

The fundamental component + state + event pattern.

Core Component Pattern

function Component({ prop }) {
  const [state, setState] = useState(initial);
  useEffect(() => { /* side effect */ return cleanup; }, [deps]);
  return <div>{state}</div>;
}

Bookmark this page for fast lookups while coding.
Extended reference tables follow below.
Match hook names to dedicated lessons for full context.
Combine with official react.dev documentation.

Essential Hooks Reference

The hooks used most often in modern React.

Hook	Purpose
`useState`	Local component state
`useEffect`	Side effects after render
`useRef`	DOM ref / mutable value
`useMemo`	Cache computed value
`useCallback`	Cache function reference
`useReducer`	Complex state transitions
`useContext`	Read context value
`useId`	Stable a11y IDs

JSX Quick Reference

Essential JSX syntax at a glance.

Pattern	Example
Expression	`{value}`
className	`className="btn"`
Style object	`style={{ margin: 8 }}`
Fragment	`<><A /><B /></>`
Conditional	`{ok ? <Yes /> : <No />}`
List	`{items.map(i => <li key={i.id} />)}`

Router and Query Reference

Common React Router and TanStack Query APIs.

API	Example
Route	`<Route path="/x" element={<X />} />`
Link	`<Link to="/x">`
useParams	`const { id } = useParams()`
useQuery	`useQuery({ queryKey, queryFn })`
useMutation	`useMutation({ mutationFn })`
Navigate	`<Navigate to="/login" />`

Common Mistakes

Using cheat sheet entries without understanding underlying behavior.
Applying useMemo/useCallback everywhere by default.
Confusing React Router v5 and v6 syntax from old snippets.
Not bookmarking this page for day-to-day development.

Key Takeaways

This cheat sheet consolidates hooks, JSX, routing, and tooling.
Extended tables below cover hooks, JSX, and CLI commands.
Use as lookup tool alongside official react.dev docs.
Revisit lessons when an entry needs deeper context.

Pro Tip

Keep this page open in a tab during your first few React projects — muscle memory replaces lookups quickly.

Extended Hooks Reference

Hook	Signature	Notes
`useState`	`const [s, setS] = useState(init)`	Functional update: `setS(v => v + 1)`
`useEffect`	`useEffect(fn, [deps])`	Return cleanup; empty deps = mount only
`useRef`	`useRef(initial)`	`.current` persists, no re-render
`useMemo`	`useMemo(() => val, [deps])`	Cache expensive computation
`useCallback`	`useCallback(fn, [deps])`	Stable function for memo children
`useReducer`	`useReducer(reducer, init)`	`dispatch({ type, payload })`
`useContext`	`useContext(Ctx)`	Requires Provider above
`useId`	`useId()`	SSR-safe unique IDs

JSX and Component Reference

Topic	Syntax
Component	`function Btn() { return <button />; }`
Props	`<User name="Ada" />`
Children	`<Card>content</Card>`
Fragment	`<>...</>`
Conditional	`{show && <Panel />}`
Lists	`items.map(i => <Row key={i.id} />)`
Events	`<button onClick={fn}>`
Controlled input	`value={x} onChange={e => setX(e.target.value)}`

Tooling and CLI Reference

Command / Config	Purpose
`npm create vite@latest -- --template react-ts`	Scaffold typed React app
`npm run dev`	Start Vite dev server
`npm run build`	Production build to dist/
`import.meta.env.VITE_*`	Client env variables (Vite)
`createRoot(el).render(<App />)`	React 18+ mount API
`React.lazy(() => import('./Page'))`	Code split component