React Cheat Sheet
Free React cheat sheet: components, props, useState, useEffect, useRef, and core patterns in one quick reference.
Components & Props
| Concept | Syntax | Example |
|---|---|---|
| Function component A component is just a function that returns JSX. | const C = () => <div /> | function Hello({ name }) { return <h1>Hi {name}</h1>; } |
| Props Read-only inputs. Strings in quotes, everything else in {braces}. | <C title="x" /> | <Card title="Hello" count={3} /> |
| children Whatever you nest inside a component arrives as the children prop. | props.children | <Card><p>inside</p></Card> |
| Conditional render JSX is an expression — use normal JS logic. | {cond && <X />} or ternary | {isOpen ? <Menu /> : null} |
| Lists key must be stable and unique — avoid using the array index. | items.map(...) with key | {todos.map(t => <li key={t.id}>{t.text}</li>)} |
State & Events
| Concept | Syntax | Example |
|---|---|---|
| useState setX triggers a re-render. Never mutate state directly. | const [x, setX] = useState(init) | const [count, setCount] = useState(0); |
| Updater form Use when the new value depends on the previous one. | setX(prev => next) | setCount(c => c + 1); |
| Events Pass the function — onClick={fn()} would call it immediately. | onClick={fn} | <button onClick={() => setOpen(true)}>Open</button> |
| Forms A controlled input: React state is the single source of truth. | value + onChange | <input value={name} onChange={e => setName(e.target.value)} /> |
| Lifting state up Share state by moving it to the closest common parent. | state in parent, setters as props | <Child onSave={setData} /> |
Effects & Data
| Concept | Syntax | Example |
|---|---|---|
| useEffect Runs after render when a dependency changed. [] = once on mount. | useEffect(fn, [deps]) | useEffect(() => { document.title = name; }, [name]); |
| Cleanup Runs before the next effect and on unmount — clear timers/listeners here. | return () => {...} | useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); }, []); |
| Fetching For real apps, consider React Query/SWR for caching and retries. | fetch in useEffect (or a library) | useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]); |
| useRef A mutable box that survives renders without causing them. | const r = useRef(init) | inputRef.current?.focus(); |
Hooks Rules & Patterns
| Concept | Syntax | Example |
|---|---|---|
| Rules of hooks Hooks must run in the same order every render. | top level only, components/hooks only | // no hooks inside if/loops |
| Custom hook Extract reusable stateful logic; name must start with `use`. | function useThing() {...} | function useToggle(init = false) { const [on, setOn] = useState(init); return [on, () => setOn(o => !o)]; } |
| useMemo / useCallback Optimizations — reach for them when something is measurably slow. | memoize values / functions | const sorted = useMemo(() => [...items].sort(), [items]); |
| Context Pass data deeply without prop drilling. | createContext + useContext | const theme = useContext(ThemeContext); |