React Reference

The React Cheat Sheet Every Frontend Dev Keeps Open

Every hook, pattern and JSX trick you actually reach for — organised by concept, not the React docs. useState, useEffect, useContext, useMemo and component patterns all on one sheet. Stop pausing mid-component to look up hook syntax.

$9
One-time payment · Instant PDF download
📄 PDF format ⚡ Instant download 🖨️ Print-ready ♾️ Keep forever
react-cheat-sheet.pdf
HOOKS
useState(init)State + setter
useEffect(fn, [])Side effects
useRef(val)Mutable ref
CONTEXT
createContext()Create context
useContext(Ctx)Consume context
<Ctx.Provider>Provide value
EVENTS
onClick={handler}Click events
onChange={e=>}Input change
onSubmit={fn}Form submit

What's inside the React Cheat Sheet

8 sections covering every part of modern React — from JSX basics to performance optimisation and the Context API.

⚛️

JSX Syntax & Expressions

Everything you need to write correct JSX — the rules React developers trip over most.

  • JSX vs HTML differences
  • Embedding expressions {}
  • className and htmlFor
  • Fragments and self-closing tags
🧩

Functional Components & Props

Build reusable components and pass data correctly with typed props patterns.

  • Arrow function components
  • Props destructuring
  • Default props and PropTypes
  • Children prop pattern
🔄

useState & State Management

Master state updates, derived state and common patterns that trip up developers.

  • useState with primitives and objects
  • Functional state updates
  • Batching and async state
  • Lifting state up
🌀

useEffect & Side Effects

Control when effects run, how to clean them up, and avoid common pitfalls.

  • Dependency array patterns
  • Cleanup functions
  • Data fetching pattern
  • Common useEffect mistakes

Performance Hooks (useMemo/useCallback)

Know when and how to optimise renders without over-engineering.

  • useMemo for expensive computations
  • useCallback for stable references
  • React.memo for component memoisation
  • When NOT to optimise
🌐

Context API & useContext

Share state across the component tree without prop drilling.

  • createContext and Provider setup
  • useContext consumption
  • Context with useReducer
  • Multiple context pattern
📝

Event Handling & Forms

Handle every type of user input and form submission correctly.

  • Synthetic events
  • Controlled vs uncontrolled inputs
  • Form submission handling
  • useRef for uncontrolled forms
🔀

Conditional & List Rendering

Render dynamic UI without cluttering JSX with complex logic.

  • Ternary and && operator patterns
  • Early return pattern
  • map() with keys
  • Rendering from arrays of objects

Who this cheat sheet is for

  • Frontend developers building React SPAs who still look up hook signatures
  • Developers upgrading class components to functional components and hooks
  • Full-stack developers returning to React after working on the backend
  • Developers learning React for job interviews and technical assessments
  • Vue or Angular developers exploring React for the first time

What you get

📄
PDF file
High-resolution, print-ready PDF. Works on any device.
Instant access
Download immediately after purchase via Gumroad.
🖨️
Print-optimised
Designed to look perfect on A4 or US Letter paper.
♾️
Yours forever
One payment. No subscription. Download again any time.
Instant Download
$9
One-time payment · PDF · No subscription

Get the React Cheat Sheet now

Stop pausing mid-component to look up hook syntax. Keep the answer open instead.

Buy on Gumroad →