React Interview Cheatsheet

Key points from 33 React concepts in one scannable reference. Click any topic to explore the full interactive explanation.

Foundations

JSX & Rendering →Medium frequency
  • JSX compiles to React.createElement() or the jsx() runtime function
  • Curly braces {} embed JavaScript expressions inside JSX
  • JSX expressions must return a single root element or Fragment
  • Attributes use camelCase: className, htmlFor, onClick
Components & Props →Medium frequency
  • Components are functions that return JSX
  • Props are read-only and flow from parent to child
  • Component names must start with an uppercase letter
  • Props should be typed with a dedicated interface
Children & Composition →Medium frequency
  • children is a special prop containing nested JSX elements
  • Composition is preferred over inheritance in React
  • Components can accept render functions as children for flexibility
  • ReactNode type covers all valid children values
Conditional Rendering →Medium frequency
  • Ternary operator renders one of two elements based on a condition
  • Logical && renders an element only when the condition is truthy
  • Early return exits the component before rendering for guard clauses
  • Returning null from a component renders nothing
Lists & Keys →Very High frequency
  • Use .map() to transform arrays into lists of JSX elements
  • Every element in a list needs a unique key prop
  • Keys must be stable, unique among siblings, and not change between renders
  • Database IDs or UUIDs make good keys; array indices do not for dynamic lists

Basic Hooks

useState & State Updates →Very High frequency
  • Returns a [value, setter] tuple, initialized with the argument
  • Setter triggers a re-render with the new value
  • Use updater function form when new state depends on previous: setValue(prev => prev + 1)
  • State updates are batched in React 18+ for all event types
useEffect & Side Effects →Very High frequency
  • Runs after render and browser paint (asynchronous)
  • Dependency array controls when the effect re-runs
  • Empty dependency array [] means run only on mount
  • No dependency array means run after every render
useRef & Mutable References →High frequency
  • Returns an object with a .current property that persists for the component lifetime
  • Mutating .current does NOT trigger a re-render
  • Use ref attribute on JSX elements to access the underlying DOM node
  • Common for focus management, measuring dimensions, and storing interval IDs
useContext & Context API →High frequency
  • createContext creates a context with an optional default value
  • Provider wraps a subtree and supplies the context value
  • useContext reads the nearest Provider value above in the tree
  • All consumers re-render when the Provider value changes

Advanced Hooks

useReducer & State Machines →Medium frequency
  • Takes a reducer function and initial state, returns [state, dispatch]
  • Reducer is a pure function: (state, action) => newState
  • Actions describe what happened, the reducer decides how state changes
  • TypeScript discriminated unions make actions type-safe
useMemo & Computed Values →High frequency
  • Accepts a function and dependency array, returns the memoized result
  • Only recomputes when a dependency changes (shallow comparison)
  • Primary use: skip expensive recalculations like sorting or filtering large lists
  • Secondary use: maintain stable object/array references for React.memo or effect dependencies
useCallback & Function Stability →High frequency
  • useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)
  • Without useCallback, a new function reference is created every render
  • Primary use: prevent re-renders of React.memo children receiving callback props
  • Secondary use: stabilize functions used in useEffect dependency arrays
useLayoutEffect & Synchronous Effects →Low frequency
  • Same API as useEffect but runs synchronously after DOM mutation, before paint
  • Use for DOM measurements that must happen before the user sees the frame
  • Prevents visual flicker when reading and immediately writing to the DOM
  • Blocks painting, so overuse degrades performance
Custom Hooks →Medium frequency
  • Must start with "use" to follow the rules of hooks
  • Can call other hooks inside them including useState, useEffect, and other custom hooks
  • Each component using the hook gets independent state
  • Replace render props and HOCs for sharing stateful logic
React 19 New Hooks →High frequency
  • useActionState replaces manual useState + isPending + try/catch for form submissions
  • useFormStatus reads parent form submission status without prop drilling — the component must be a child of a <form>
  • useOptimistic provides instant UI feedback that auto-reverts when the async action settles
  • use() reads promises (suspending until resolved) and context values conditionally — not bound by Rules of Hooks

Rendering

Virtual DOM & Reconciliation →Very High frequency
  • Virtual DOM is a plain JS object tree describing the UI
  • React diffs the new virtual tree against the previous one
  • O(n) heuristics: different element types rebuild entire subtrees
  • Keys help React identify moved, added, or removed children
Component Lifecycle →Medium frequency
  • Mount: component appears in the tree, initial render occurs
  • Update: re-render triggered by state change, prop change, or parent re-render
  • Unmount: component removed from the tree, cleanup runs
  • useEffect setup runs after mount and after every update matching dependencies
Re-render Triggers →Medium frequency
  • State change: calling setState with a new value triggers a re-render
  • Parent re-render: all children re-render by default when a parent re-renders
  • Context change: all consumers of a context re-render when the provider value changes
  • Same state value: React bails out if the new state is the same reference (Object.is)
Controlled & Uncontrolled Components →Medium frequency
  • Controlled: value prop + onChange handler, React state is the source of truth
  • Uncontrolled: defaultValue + ref, DOM is the source of truth
  • Controlled gives full programmatic control for validation, formatting, and conditional logic
  • Uncontrolled is simpler for basic forms where you only need the value on submit
Refs & DOM Access →Medium frequency
  • useRef creates a ref attached to a DOM element via the ref attribute
  • Ref.current is null until the component mounts
  • forwardRef allows parent components to ref a child's inner DOM element
  • useImperativeHandle customizes what the forwarded ref exposes

Patterns

Compound Components →Medium frequency
  • Parent component manages shared state via Context Provider
  • Child components consume the shared context to coordinate behavior
  • Consumers control rendering order and composition freely
  • Internal state sharing is hidden from the public API
Render Props →Medium frequency
  • A function prop (often children) receives internal state and returns JSX
  • Inverts control: logic component provides data, consumer provides UI
  • Largely replaced by custom hooks for sharing stateful logic
  • Still useful when the shared logic involves DOM structure or wrapper elements
Higher-Order Components →Medium frequency
  • A function that takes a component and returns a new component
  • Does not modify the input component, wraps it instead
  • Convention: prefix with "with" (withAuth, withLoading)
  • Must forward refs and hoist statics for transparency
Error Boundaries →High frequency
  • Implemented as class components using getDerivedStateFromError and componentDidCatch
  • Catch errors during rendering, lifecycle methods, and constructors
  • Do NOT catch errors in event handlers, async code, or SSR
  • Place boundaries strategically: route-level, feature-level, or widget-level
Context Patterns →Medium frequency
  • Split state and dispatch into separate contexts to avoid re-renders on dispatch-only consumers
  • Compose providers with a single wrapper to avoid provider nesting
  • Custom hooks with null checks provide type-safe context access
  • Context selectors (via useSyncExternalStore) prevent re-renders from unrelated changes
Portals →Low frequency
  • createPortal(children, domNode) renders into any DOM node
  • Portal children escape overflow:hidden and z-index stacking contexts
  • Events still bubble through the React tree, not the DOM tree
  • Context is still accessible from the React tree position
Server Actions →High frequency
  • Marked with "use server" directive — can be in a dedicated file or inline in Server Components
  • Passed to form action prop for automatic FormData collection and server execution
  • Enable progressive enhancement: forms work as standard HTML submissions before JavaScript loads
  • Pair with useActionState for managed pending/error state and useOptimistic for instant UI feedback

Performance

React.memo & Shallow Comparison →High frequency
  • Wraps a component to skip re-render when props are shallowly equal
  • Shallow comparison: checks top-level property references, not deep equality
  • Must be paired with useCallback/useMemo for object and function props
  • Custom comparator function can override the default shallow comparison
Code Splitting & Lazy Loading →Medium frequency
  • React.lazy accepts a function returning a dynamic import() promise
  • The bundler automatically creates a separate chunk for the lazy component
  • Suspense wraps lazy components and displays a fallback during loading
  • Route-level splitting is the highest-impact optimization
Suspense & Data Loading →Medium frequency
  • Suspense shows a fallback prop while children are suspended
  • Works with React.lazy for code splitting
  • Works with data fetching in frameworks like Next.js via Server Components
  • Eliminates manual loading state management for supported data sources
Concurrent Features →Low frequency
  • Concurrent rendering lets React pause, resume, and abandon renders
  • useTransition marks state updates as non-urgent transitions
  • useDeferredValue defers re-rendering with a stale value until urgent work completes
  • Transitions keep the current UI visible while the next one prepares in the background
Server Components →Medium frequency
  • Server Components run only on the server with no client-side JavaScript
  • They can directly access databases, file systems, and server-only APIs
  • Cannot use hooks, state, effects, or browser APIs
  • Client Components are marked with "use client" and include JavaScript in the bundle
React Compiler →Medium frequency
  • Runs at build time — analyzes data dependencies via static analysis and inserts fine-grained caching
  • Replaces manual useMemo, useCallback, and React.memo with automatic equivalents
  • Requires components to follow the Rules of React: pure render, immutable props/state, unconditional hooks
  • Uses an internal useMemoCache hook with per-expression cache slots, more granular than manual useMemo blocks