React Cheat Sheet
A searchable, printable React 19 reference — components, JSX, hooks, the new Actions APIs, context, refs and performance. Free.
Components & JSX
12function App() { return <h1>Hi</h1>; }
A function component returning JSX
export default function App() {}
Default-export a component
<Greeting name="Ada" />
Render a component with props
{1 + 2} or {user.name}
Embed a JS expression with braces
<>{a}{b}</>
Fragment groups nodes, no extra DOM
<div className="card">
Use className, not class, for CSS
{isOpen && <Menu />}
Render conditionally with &&
{ok ? <Yes /> : <No />}
Choose between nodes with a ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render a list from an array
function Btn({ label, onClick }) {}
Destructure props in the signature
function Card({ children }) { return children; }
Read nested JSX via the children prop
<input value={v} onChange={onChange} />
Controlled input bound to state
Rendering & setup
10import { createRoot } from 'react-dom/client'
Import the client root API
createRoot(document.getElementById('root')).render(<App/>)
Mount the app into the DOM
import { StrictMode } from 'react'
Import StrictMode wrapper
<StrictMode><App /></StrictMode>
Surface bugs in development
import { hydrateRoot } from 'react-dom/client'
Import the hydration API
hydrateRoot(el, <App />)
Attach React to server HTML
root.unmount()
Tear down a mounted root
import App from './App.jsx'
Import a component from a module
<App {...props} />
Spread an object as props
export { Button, Card }
Named-export multiple components
State & effects
12const [count, setCount] = useState(0)
Declare a state variable
setCount(c => c + 1)
Update from the previous value
setUser(u => ({ ...u, name }))
Update object state immutably
useEffect(() => { run(); }, [dep])
Run an effect when deps change
useEffect(() => { /* once */ }, [])
Run an effect only on mount
useEffect(() => () => cleanup(), [])
Return a cleanup function
const ref = useRef(null)
Hold a mutable value across renders
const [state, dispatch] = useReducer(r, init)
Manage complex state with a reducer
const theme = useContext(ThemeContext)
Read the nearest context value
const memo = useMemo(() => calc(a), [a])
Memoize an expensive computation
useLayoutEffect(() => {}, [])
Run synchronously after layout
useSyncExternalStore(sub, get)
Subscribe to an external store
React 19 hooks & APIs
12import { use } from 'react'
Import the new use API
const data = use(promise)
Read a promise, suspends until ready
const theme = use(ThemeContext)
Read context, allowed conditionally
const [state, action, pending] = useActionState(fn, init)
Track state, action and pending
const [opt, addOpt] = useOptimistic(state, reducer)
Show an optimistic value instantly
const { pending } = useFormStatus()
Read the parent form submit status
const [isPending, startTransition] = useTransition()
Mark updates as non-urgent
startTransition(async () => await save())
Run an async Action in a transition
const deferred = useDeferredValue(value)
Defer a value to keep UI responsive
const id = useId()
Generate a stable unique id
<title>Page title</title>
Render metadata anywhere in the tree
function Input({ ref }) {}
ref is a normal prop, no forwardRef
Forms & Actions
12<form action={handleSubmit}>
Pass a function as a form Action
function handleSubmit(formData) {}
Action receives the FormData
formData.get('email')
Read a field from FormData
const [state, action] = useActionState(submit, null)
Wire an Action to component state
<form action={action}>
Use the wrapped Action on the form
const [s, a, pending] = useActionState(fn, init)
Expose a pending flag for the UI
return { error: 'Invalid' }
Return error state from an Action
function Submit() { const { pending } = useFormStatus() }
Read pending inside the submit button
<button disabled={pending}>Save</button>
Disable submit while pending
import { requestFormReset } from 'react-dom'
Import the form reset helper
requestFormReset(formEl)
Reset an uncontrolled form
<form action={action}><Submit /></form>
Compose Action form with status
Props & composition
10function Hi({ name = 'Guest' }) {}
Default prop via destructuring
function Box({ children }) { return children; }
Wrap content with the children prop
<Box><p>Inside</p></Box>
Pass JSX as children
function List({ render }) { return render(); }
Render prop pattern
<List render={() => <Item />} />
Provide a render function
<Input {...props} />
Forward all props with spread
const { id, ...rest } = props
Pick a prop and pass the rest
<Avatar {...rest} size="lg" />
Spread then override a prop
function Btn(props: BtnProps) {}
Type props with TypeScript interfaces
<Slot label={<b>Hi</b>} />
Pass JSX through a named prop
Events
10<button onClick={handleClick}>
Attach a click handler
function handleClick(e) {}
Receive the synthetic event
<input onChange={e => set(e.target.value)} />
Read an input value on change
<form onSubmit={e => e.preventDefault()}>
Stop the default form submit
e.stopPropagation()
Prevent the event from bubbling
<li onClick={() => remove(id)}>
Pass arguments with a closure
<input onKeyDown={e => e.key === 'Enter'}
Handle a specific key press
<div onMouseEnter={hover}>
Listen for pointer events
e.currentTarget.value
Read the element the handler is on
<button onClick={() => {}} type="button">
Avoid implicit form submission
Lists & keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render one node per item
key={item.id}
Give each item a stable key
key={index}
Index keys only for static lists
users.map(u => <Card key={u.id} {...u} />)
Spread item fields as props
{list.length === 0 && <Empty />}
Show a fallback for empty lists
import { Fragment } from 'react'
Import Fragment for keyed groups
<Fragment key={id}>{a}{b}</Fragment>
A keyed fragment in a list
{rows.filter(r => r.on).map(...)}
Filter before mapping
Keys must be unique among siblings
Why keys help React diff lists
{[...Array(n)].map((_, i) => ...)}
Map a fixed-length range
Context
10const ThemeContext = createContext('light')
Create a context with a default
import { createContext } from 'react'
Import the context factory
<ThemeContext value={theme}>
Provide a value (React 19 syntax)
<ThemeContext value={theme}><App /></ThemeContext>
Wrap the tree that reads it
const theme = useContext(ThemeContext)
Read context with useContext
const theme = use(ThemeContext)
Read context with the use API
if (cond) { const t = use(Ctx); }
use can read context conditionally
export const ThemeContext = createContext()
Export a shared context
<Ctx value={{ user, setUser }}>
Pass an object as the value
Avoid new objects each render
Memoize values to limit re-renders
Refs
10const inputRef = useRef(null)
Create a ref holder
<input ref={inputRef} />
Attach the ref to a node
inputRef.current.focus()
Access the DOM node via current
function Field({ ref }) { return <input ref={ref} /> }
ref as a prop, no forwardRef
<Field ref={inputRef} />
Pass a ref to a component
useImperativeHandle(ref, () => ({ focus }))
Expose an imperative API
const setRef = node => { box = node; }
Use a callback ref
<div ref={setRef} />
Attach a callback ref
const count = useRef(0)
Store a value without re-rendering
ref={node => { return () => cleanup(); }}
Callback ref with cleanup (React 19)
Performance
10const Memo = memo(Component)
Skip re-render when props are equal
import { memo } from 'react'
Import the memo helper
const value = useMemo(() => calc(a), [a])
Cache a computed value
const fn = useCallback(() => f(a), [a])
Cache a function identity
const Lazy = lazy(() => import('./Big.jsx'))
Code-split a component
import { lazy, Suspense } from 'react'
Import lazy and Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Show a fallback while loading
startTransition(() => setQuery(q))
Mark non-urgent state updates
const slow = useDeferredValue(query)
Defer expensive derived UI
React Compiler auto-memoizes
Often removes manual memoization
Misc & metadata
10<Suspense fallback={<Loading />}>
Boundary for async content
class ErrorBoundary extends Component {}
Catch render errors (legacy class)
<title>My Page</title>
Hoist document title from a component
<meta name="description" content="..." />
Render meta tags into the head
<link rel="stylesheet" href="..." />
Hoist a stylesheet link
<Comp key={id} />
Change key to remount a component
React.lazy(() => import('./Page.jsx'))
Lazily import a route component
createPortal(node, container)
Render into a different DOM node
{/* a comment */}
Write a comment inside JSX
cleanup return in useEffect
Always release subscriptions/timers
No entry matches “:q”.
Need help?
Found an issue with this tool? Let our team know.