React Cheat Sheet
Quick reference for React hooks, JSX syntax, component patterns, state management, and common recipes. React 18+ patterns with TypeScript examples.
Component Basics
| function App() { return <div>Hi</div> } | Function component |
| export default App | Default export |
| <Component prop="value" /> | Pass props |
| function App({ name }: { name: string }) {} | Props with TypeScript |
| { condition && <Component /> } | Conditional rendering |
| { condition ? <A /> : <B /> } | Ternary rendering |
| { items.map(i => <Item key={i.id} />) } | List rendering (key required) |
| <>...</> | Fragment (no extra DOM node) |
| {children} | Render child components |
useState
| const [count, setCount] = useState(0) | State with initial value |
| const [user, setUser] = useState<User | null>(null) | Typed state (TypeScript) |
| setCount(prev => prev + 1) | Update with previous value (safe) |
| setUser({ ...user, name: "Jo" }) | Update object (spread to avoid mutation) |
| setItems([...items, newItem]) | Add to array |
| setItems(items.filter(i => i.id !== id)) | Remove from array |
useEffect
| useEffect(() => { ... }, []) | Run once on mount |
| useEffect(() => { ... }, [dep]) | Run when dep changes |
| useEffect(() => { ... }) | Run on every render (rare) |
| useEffect(() => { return () => cleanup() }, []) | Cleanup on unmount |
| useEffect(() => { const ctrl = new AbortController(); fetch(url, { signal: ctrl.signal }); return () => ctrl.abort(); }, [url]) |
Fetch with cleanup |
Other Hooks
| const ref = useRef<HTMLInputElement>(null) | DOM ref (TypeScript) |
| const value = useContext(MyContext) | Read context value |
| const value = useMemo(() => expensive(), [dep]) | Memoize computed value |
| const fn = useCallback(() => { ... }, [dep]) | Memoize function reference |
| const [state, dispatch] = useReducer(reducer, init) | Complex state logic |
| useId() | Generate unique ID for accessibility |
| useDeferredValue(value) | Defer non-urgent updates |
| useTransition() | Mark updates as non-urgent |
Event Handling
| onClick={() => handleClick()} | Click handler |
| onChange={(e) => setValue(e.target.value)} | Input change |
| onSubmit={(e) => { e.preventDefault(); ... }} | Form submit |
| onKeyDown={(e) => e.key === "Enter" && submit()} | Keyboard event |
| React.ChangeEvent<HTMLInputElement> | TypeScript event type |
| React.FormEvent<HTMLFormElement> | TypeScript form event type |
Common Patterns
| const [data, setData] = useState(null); useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]) |
Data fetching pattern |
| const MyContext = createContext<T>(defaultValue); <MyContext.Provider value={val}>...</MyContext.Provider> |
Context provider pattern |
| const Input = forwardRef<HTMLInputElement, Props>((props, ref) => ...) | Forward ref to DOM element |
| if (isLoading) return <Spinner />; if (error) return <Error />; return <Data />; |
Loading/error/data pattern |
| React.lazy(() => import("./Heavy")) | Code splitting / lazy loading |