Interview
React Cheatsheet
A quick reference guide for React hooks, component patterns, state management APIs, performance utilities, and common CLI commands.
Last Updated: July 15, 2026
•
10 min read
1. Learning Objectives
This cheatsheet serves as a quick reference guide. By reviewing these tables, you can quickly find:
- All built-in React hooks and their signatures.
- Component declaration patterns (function, memo, lazy, forwardRef).
- State management API patterns (Context, useReducer, external stores).
- Performance optimization utilities and when to use them.
- Common project setup and CLI commands.
2. Overview
This cheatsheet covers the essential React APIs, hooks, patterns, and commands in quick-reference table format. Bookmark it for fast lookups during development and interview prep.
3. React Hooks Cheat Sheet
| Hook | Syntax | Purpose |
|---|---|---|
| useState | const [val, setVal] = useState(initial) |
Declares a state variable with an initial value. |
| useEffect | useEffect(() => { ... return cleanup }, [deps]) |
Runs side effects after render. Cleanup on unmount or dependency change. |
| useContext | const val = useContext(MyContext) |
Reads the nearest context provider's value. |
| useReducer | const [state, dispatch] = useReducer(reducer, init) |
Manages complex state transitions via a reducer function. |
| useRef | const ref = useRef(initialValue) |
Persists a mutable value across renders without triggering re-render. |
| useMemo | const cached = useMemo(() => compute(), [deps]) |
Caches an expensive computation between renders. |
| useCallback | const fn = useCallback(() => {...}, [deps]) |
Caches a function reference between renders. |
| useLayoutEffect | useLayoutEffect(() => { ... }, [deps]) |
Like useEffect, but fires synchronously before the browser paints. |
4. Component Patterns Cheat Sheet
| Pattern | Syntax | When to Use |
|---|---|---|
| Function Component | function App(props) { return <div/> } |
Default component declaration for all new components. |
| React.memo | const Comp = React.memo(MyComp) |
Skip re-renders when props haven't changed (shallow compare). |
| React.lazy | const Comp = React.lazy(() => import('./Comp')) |
Code-split a component for on-demand loading. |
| forwardRef | const Comp = forwardRef((props, ref) => ...) |
Pass a ref through a component to a child DOM element. |
| Suspense | <Suspense fallback={<Loading/>}>...</Suspense> |
Show fallback while lazy components or data are loading. |
| Error Boundary | class EB extends Component { getDerivedStateFromError() } |
Catch render errors in child components and show fallback UI. |
| Portal | ReactDOM.createPortal(jsx, domNode) |
Render children into a DOM node outside the parent hierarchy. |
5. State Management Cheat Sheet
| Tool | Best For | Key API |
|---|---|---|
| useState | Simple local component state. | const [v, setV] = useState(init) |
| useReducer | Complex state with many transitions. | dispatch({ type: 'ACTION' }) |
| Context API | Avoiding prop drilling for global values (theme, auth). | createContext / useContext |
| Redux Toolkit | Large-scale apps with many feature slices. | createSlice / configureStore |
| Zustand | Lightweight global state with fine-grained subscriptions. | create((set) => {...}) |
6. Performance Optimization Cheat Sheet
| Technique | What It Optimizes | API |
|---|---|---|
| React.memo | Prevents child re-renders when props unchanged. | React.memo(Component) |
| useMemo | Caches expensive computed values. | useMemo(() => val, [deps]) |
| useCallback | Stabilizes function references for child props. | useCallback(fn, [deps]) |
| React.lazy + Suspense | Code splits components to reduce initial bundle size. | lazy(() => import('./Comp')) |
| Virtualization | Renders only visible items in long lists. | react-window / react-virtuoso |
7. JSX Syntax Quick Reference
| Pattern | Syntax |
|---|---|
| Embed expression | <p>{variable}</p> |
| Conditional render | {isLoggedIn && <Dashboard />} |
| Ternary render | {isLoggedIn ? <Dashboard /> : <Login />} |
| List render | {items.map(item => <Item key={item.id} />)} |
| Inline style | style={{ color: 'red', fontSize: '16px' }} |
| Event handler | onClick={handleClick} |
| Spread props | <Component {...props} /> |
| Fragment | <>...</> or <React.Fragment>...</React.Fragment> |
8. Common Array State Operations
| Operation | Immutable Pattern |
|---|---|
| Add item | setItems(prev => [...prev, newItem]) |
| Remove item | setItems(prev => prev.filter(i => i.id !== id)) |
| Update item | setItems(prev => prev.map(i => i.id === id ? {...i, name} : i)) |
| Toggle item | setItems(prev => prev.map(i => i.id === id ? {...i, done: !i.done} : i)) |
| Safe sort | [...items].sort((a, b) => a.name.localeCompare(b.name)) |
9. Project Setup Commands
| Command | Description |
|---|---|
| npx create-react-app my-app | Create a new React app with CRA (legacy). |
| npm create vite@latest my-app -- --template react | Create a new React app with Vite (recommended). |
| npx create-next-app@latest my-app | Create a new Next.js application. |
| npm run dev | Start the development server. |
| npm run build | Create a production-optimized build. |
10. Custom Hook Template
11. React Router Quick Reference
| API | Usage |
|---|---|
| BrowserRouter | Wraps the app to enable routing with the History API. |
| Routes / Route | Define route paths and their corresponding components. |
| Link / NavLink | Client-side navigation without full page reloads. |
| useNavigate() | Programmatic navigation from event handlers. |
| useParams() | Access URL dynamic parameters (e.g., /users/:id). |
| Outlet | Renders nested child routes inside a parent layout. |