Explore the latest demo: AI Chat with Tools integration. Explore now →
Checking session...

React Reference

200 FEATURES

The only React cheatsheet you'll ever need — hooks, patterns, performance, TypeScript, Next.js & more.

⌕
Showing 200 of 200 features
⚡

State Hooks

10
hookuseState – primitive
▼
hookuseState – object
▼
hookuseState – array
▼
hookuseState – lazy initialiser
▼
hookuseReducer – basic
▼
hookuseReducer – with payload
▼
hookuseReducer – lazy init
▼
patternDerived state (no useState)
▼
patternState reset on key change
▼
hookuseRef for stable values
▼
🔁

Effect Hooks

10
hookuseEffect – on mount
▼
hookuseEffect – on dep change
▼
hookuseEffect – fetch data
▼
hookuseEffect – subscriptions
▼
hookuseLayoutEffect
▼
customCustom hook – usePrevious
▼
customCustom hook – useLocalStorage
▼
customCustom hook – useFetch
▼
customCustom hook – useDebounce
▼
customCustom hook – useOnClickOutside
▼
🚀

Performance Hooks

10
hookuseMemo
▼
hookuseCallback
▼
perfReact.memo
▼
hookuseTransition
▼
hookuseDeferredValue
▼
perfCode splitting – lazy
▼
perfSuspense for data
▼
hookuseId
▼
perfWindowing / virtualisation
▼
perfProfiler API
▼
🌐

Context & Refs

10
hookcreateContext + useContext
▼
patternContext with state
▼
patternMultiple contexts
▼
hookuseRef – DOM
▼
hookforwardRef
▼
hookuseImperativeHandle
▼
patternCallback ref
▼
patternContext performance split
▼
patternuseRef – interval
▼
patternRef as instance variable
▼
🎨

Rendering Patterns

10
jsxConditional rendering – &&
▼
jsxConditional rendering – ternary
▼
patternEarly return
▼
jsxList rendering – map
▼
jsxList with index key (when safe)
▼
jsxFragments
▼
patternRender props
▼
patternChildren prop
▼
jsxPortal
▼
patternError boundary
▼
📦

Props & Composition

10
patternProp spreading
▼
patternDefault props
▼
patternCompound components
▼
patternControlled component
▼
patternUncontrolled component
▼
patternProp types (runtime)
▼
typescriptTypeScript props
▼
patternas prop (polymorphic)
▼
patternSlot pattern (named children)
▼
patternHigher-Order Component (HOC)
▼
📝

Forms

10
formControlled form
▼
formForm submission
▼
formForm validation
▼
libraryReact Hook Form
▼
formSelect & Checkbox
▼
formMulti-select / checkboxes
▼
formFile input
▼
libraryZod validation
▼
formForm with useReducer
▼
patternOptimistic form update
▼
💾

Data & API

10
apifetch – GET
▼
apifetch – POST
▼
libraryAxios
▼
libraryReact Query – useQuery
▼
libraryReact Query – useMutation
▼
librarySWR
▼
apiAbort controller
▼
apiError handling pattern
▼
patternPagination
▼
patternInfinite scroll
▼
🗺️

Routing

10
routingReact Router – setup
▼
routinguseNavigate
▼
routinguseParams
▼
routinguseSearchParams
▼
routingLink & NavLink
▼
routingProtected routes
▼
routingNested routes & Outlet
▼
routinguseLocation
▼
routingLazy routes
▼
routingRoute loader (v6.4+)
▼
🗄️

State Management

10
libraryZustand – store
▼
libraryZustand – async
▼
libraryRedux Toolkit – slice
▼
libraryRedux Toolkit – async thunk
▼
libraryJotai – atoms
▼
patternURL as state
▼
patternServer state vs client state
▼
patternContext vs Zustand
▼
libraryImmer for immutable updates
▼
libraryRecoil – atoms & selectors
▼
🏗️

Patterns & Architecture

10
patternContainer / Presentational
▼
patternFeature folder structure
▼
patternBarrel exports
▼
patternAbsolute imports
▼
patternIndex pattern for components
▼
patternData normalisation
▼
librarycreateEntityAdapter (RTK)
▼
patternSingleton service pattern
▼
patternObserver / event emitter
▼
patternStorybook-driven development
▼
💅

Styling

10
stylingCSS Modules
▼
stylingTailwind CSS
▼
stylingclsx / cn helper
▼
stylingCSS-in-JS (styled-components)
▼
stylingCSS custom properties in React
▼
stylingInline styles
▼
stylingCSS animations
▼
stylingDynamic className
▼
stylingResponsive styles
▼
stylingDark mode
▼
📘

TypeScript

10
typescriptReact.FC (avoid it)
▼
typescriptReactNode vs JSX.Element
▼
typescriptEvent types
▼
typescriptDiscriminated unions
▼
typescriptGeneric components
▼
typescriptuseRef types
▼
typescriptType assertions (avoid when possible)
▼
typescriptUtility types
▼
typescriptSatisfies operator
▼
typescriptBranded types
▼
🧪

Testing

10
testingReact Testing Library – render
▼
testingRTL – user events
▼
testingRTL – async
▼
testingMocking fetch / axios
▼
testingTesting hooks – renderHook
▼
testingVitest setup
▼
testingSnapshot testing
▼
testingMock module
▼
testingAccessibility testing
▼
testingPlaywright E2E
▼
🔬

Advanced Patterns

10
advancedConcurrent mode – startTransition
▼
advancedServer Components (Next.js)
▼
advanceduse() hook (React 19)
▼
advanceduseOptimistic (React 19)
▼
advancedServer Actions (Next.js 14+)
▼
advancedStreaming with Suspense
▼
advancedCompound components with Context
▼
advancedDynamic import with ternary
▼
advancedStrict Mode
▼
advancedCustom event system
▼
▲

Next.js

10
nextjsApp Router basics
▼
nextjsgenerateMetadata
▼
nextjsgenerateStaticParams
▼
nextjsRoute handlers (API)
▼
nextjsMiddleware
▼
nextjsImage component
▼
nextjsLink component
▼
nextjsEnvironment variables
▼
nextjsRevalidation
▼
nextjscookies() and headers()
▼
♿

Accessibility & Misc

10
a11yARIA roles & labels
▼
a11yFocus management
▼
a11yLive regions
▼
a11ySkip navigation link
▼
a11yVisually hidden (sr-only)
▼
a11yuseId for form labels
▼
a11yKeyboard shortcuts
▼
miscEnvironment detection
▼
miscReact DevTools
▼
miscWhy did this render?
▼
✨

More Patterns

30
patternDebounce API call
▼
patternIntersection Observer
▼
patternCopy to clipboard
▼
patternDrag and drop
▼
patternToast notifications
▼
patternPolling
▼
patternWebSocket
▼
miscPWA / Service Worker
▼
hookuseSyncExternalStore
▼
patternComponent composition vs inheritance
▼
patternObject.entries mapping
▼
patternGroup by / categorise
▼
patternFlatten / dedup
▼
patternSort array immutably
▼
patternNullish coalescing & optional chaining
▼
patternObject destructuring with rename
▼
patternArray destructuring
▼
patternTemplate literals
▼
patternShort-circuit evaluation
▼
patternObject shorthand & computed keys
▼
patternPromise.all / allSettled
▼
patternWeakMap / WeakRef for cache
▼
stylingCSS grid layout
▼
stylingCSS container queries
▼
toolingvite.config.js — common setup
▼
toolingESLint + Prettier
▼
toolingHusky pre-commit hooks
▼
toolingEnvironment variables (Vite)
▼
toolingBundle analysis
▼
toolingReact Query DevTools
▼