React Interview Questions for Freshers
The React questions freshers are most often asked, with a short answer for each. Every question links to a full lesson with the traps interviewers look for and a step-by-step trace.
01 · React Fundamentals for Frontend Interviews · Easy
React Mental Model & The Declarative Paradigm
React is declarative: instead of mutating the DOM step-by-step, you describe what the UI should look like for a given state as a pure function (UI = f(state)), and React calculates the necessary DOM updates efficiently.
Full answer, traps and step-by-step trace02 · React Fundamentals for Frontend Interviews · Easy
JSX Compilation & Modern JSX Runtime
JSX is syntactic sugar that compilers transpile into createElement or modern jsx-runtime function calls, returning plain JavaScript element objects marked with a unique Symbol($$typeof) security tag.
Full answer, traps and step-by-step trace03 · React Fundamentals for Frontend Interviews · Easy
Components, Props & Children Composition
Props are read-only inputs passed from parents to children that enforce unidirectional data flow.
Full answer, traps and step-by-step trace04 · React Fundamentals for Frontend Interviews · Medium
Conditional Rendering & List Keys
Conditional rendering displays UI based on conditions, where the falsy zero (0 && <Component />) pitfall renders the literal number 0.
Full answer, traps and step-by-step trace05 · React Fundamentals for Frontend Interviews · Medium
Fragments, Portals & Event Bubbling
Fragments group elements without adding extra DOM nodes.
Full answer, traps and step-by-step trace06 · State Mechanics, Batching, and Lifecycle Transitions · Easy
State Mental Model & Memory Snapshots
In React, state acts like an immutable snapshot captured at the start of each render execution. Direct in-place object mutations do not change object references, preventing React from detecting changes and triggering re-renders.
Full answer, traps and step-by-step trace07 · State Mechanics, Batching, and Lifecycle Transitions · Medium
State Updates & React 18 Automatic Batching
Batching groups multiple state updates into a single re-render to optimize performance. In React 18+, automatic batching batches updates everywhere, including promises, setTimeout, and native event handlers, unless explicitly opted out via flushSync.
Full answer, traps and step-by-step trace08 · State Mechanics, Batching, and Lifecycle Transitions · Medium
Functional Updaters & Stale State Resolution
Calling setCount(count + 1) multiple times uses the same captured count snapshot from the current render, resulting in only one increment.
Full answer, traps and step-by-step trace09 · State Mechanics, Batching, and Lifecycle Transitions · Medium
Derived State vs Redundant State Patterns
If a value can be computed from existing props or state, never mirror it in state. Storing derived values in state creates duplicate sources of truth that easily become desynchronized and trigger unnecessary extra re-renders.
Full answer, traps and step-by-step trace10 · State Mechanics, Batching, and Lifecycle Transitions · Medium
Lifecycle Transitions: Mount, Update & Unmount
In functional React, components do not have lifecycle methods; instead, they synchronize state with external systems via useEffect.
Full answer, traps and step-by-step trace11 · Core React Hooks: State, Synchronization, and Refs · Medium
useState Internals, Lazy Init & State Resetting
useState persists state across renders in a linked list of hook slots attached to the component Fiber.
Full answer, traps and step-by-step trace12 · Core React Hooks: State, Synchronization, and Refs · Medium
useEffect Mental Model: Synchronization Over Lifecycle
useEffect synchronizes your React component with an external system (browser DOM, network, timers, or third-party widgets) outside of React. It runs after the browser paints so it never blocks layout rendering, comparing dependencies using Object.is.
Full answer, traps and step-by-step trace13 · Core React Hooks: State, Synchronization, and Refs · Medium
useEffect Anti-Patterns & Re-render Traps
Common useEffect traps include infinite re-render loops caused by updating state dependencies unconditionally, memory leaks from missing cleanups, and stale closures. In React 18 StrictMode, effects run mount -> cleanup -> mount to surface cleanup bugs.
Full answer, traps and step-by-step trace14 · Core React Hooks: State, Synchronization, and Refs · Medium
useRef: DOM Access & Mutable Containers
useRef returns a plain JavaScript object with a persistent { current: value } property that survives across renders without triggering a re-render when mutated.
Full answer, traps and step-by-step trace15 · Core React Hooks: State, Synchronization, and Refs · Medium
useReducer: Predictable State Transitions
useReducer manages complex state transitions by decoupling what happened (dispatching an action object) from how state updates (a pure reducer function).
Full answer, traps and step-by-step trace16 · Advanced Hooks, Referential Equality, and Stores · Medium
useMemo & useCallback: Referential Stability
useMemo caches the result of an expensive calculation, while useCallback caches the function instance itself. Their primary interview value is preserving referential equality for props passed to memoized children (React.memo) or hook dependency arrays.
Full answer, traps and step-by-step trace17 · Advanced Hooks, Referential Equality, and Stores · Medium
useImperativeHandle & forwardRef Encapsulation
useImperativeHandle customizes the ref instance value exposed by a child component to its parent.
Full answer, traps and step-by-step trace18 · Advanced Hooks, Referential Equality, and Stores · Easy
useId: Deterministic Accessible ID Generation
useId generates unique, deterministic identifiers that remain identical across server rendering and client hydration. It avoids hydration mismatches caused by Math.random() and powers accessible form elements (htmlFor, aria-describedby).
Full answer, traps and step-by-step trace19 · Advanced Hooks, Referential Equality, and Stores · Easy
useDebugValue: Custom Hook DevTools Labels
useDebugValue adds custom diagnostic labels to custom hooks in the React DevTools inspector. It accepts an optional formatter function to defer expensive string formatting until the developer actually inspects the component in DevTools.
Full answer, traps and step-by-step trace20 · React Internals: Fiber Architecture and Reconciliation · Medium
The Reconciliation Diffing Algorithm & Heuristics
React uses an O(n) heuristic diffing algorithm based on two assumptions: two elements of different types produce completely different trees, and the developer can hint which child elements are stable across renders with a key prop.
Full answer, traps and step-by-step trace21 · React Internals: Fiber Architecture and Reconciliation · Medium
Virtual DOM Mechanics: Myths & Overhead
The Virtual DOM is not inherently faster than direct DOM manipulation; it provides a declarative programming model with acceptable performance overhead. React minimizes DOM reflows by calculating diffs in memory and applying batched mutations.
Full answer, traps and step-by-step trace22 · React Internals: Fiber Architecture and Reconciliation · Medium
SyntheticEvent System & Event Delegation
React SyntheticEvents wrap native browser events to provide cross-browser consistency.
Full answer, traps and step-by-step trace23 · Performance Engineering, Profiling, and Virtualization · Medium
React.memo & Custom Comparator Functions
React.memo is a higher-order component that skips re-rendering when props are shallowly equal (Object.is). You can pass a custom arePropsEqual(prevProps, nextProps) comparator, returning true to skip re-rendering or false to re-render.
Full answer, traps and step-by-step trace24 · Performance Engineering, Profiling, and Virtualization · Medium
Re-render Optimization Without Memo
You can eliminate unnecessary component re-renders without using useMemo or React.memo by refactoring your component architecture: "Moving State Down" to isolate frequently updating state, and "Lifting Content Up" using children props to preserve element…
Full answer, traps and step-by-step trace25 · Performance Engineering, Profiling, and Virtualization · Medium
Code Splitting with React.lazy & Suspense
Code splitting breaks monolithic JavaScript bundles into smaller chunks loaded on demand. React.lazy enables dynamic import() of components, while <Suspense fallback={<Spinner />}> coordinates loading boundaries during network chunk resolution.
Full answer, traps and step-by-step trace26 · Concurrent Rendering, Priority Lanes, and React 19 · Medium
useTransition: Non-Blocking Background Updates
useTransition marks state updates as non-blocking transitions.
Full answer, traps and step-by-step trace27 · Concurrent Rendering, Priority Lanes, and React 19 · Medium
useDeferredValue: Deferring Computations
useDeferredValue accepts a value and returns a deferred copy that lags behind during urgent updates.
Full answer, traps and step-by-step trace28 · Form Architecture, Modern FormData, and Validation · Easy
Controlled vs Uncontrolled Inputs & Cursors
Controlled inputs have their value driven by React state via the value and onChange props. Uncontrolled inputs store form data in the native DOM itself, accessed via defaultValue and refs.
Full answer, traps and step-by-step trace29 · Form Architecture, Modern FormData, and Validation · Medium
Modern Uncontrolled Forms with FormData
Modern uncontrolled forms use standard HTML name attributes and the native FormData API (new FormData(event.currentTarget)) on submission. This eliminates state re-renders during typing while extracting all form fields in one clean operation.
Full answer, traps and step-by-step trace30 · Form Architecture, Modern FormData, and Validation · Medium
Form Validation & Schema Integration (Zod)
Schema-based validation decouples business validation rules from UI components. Using schemas (Zod or Yup) provides type inference, centralized error messages, and support for touched, dirty, and blur validation states without cluttering JSX.
Full answer, traps and step-by-step trace31 · State Architecture, Store Subscriptions, and Server Cache · Medium
State Architecture: Taxonomy & Categorization
Modern React state belongs to five distinct categories: local UI state (useState), shared client state (Zustand/Context), server cache state (TanStack Query), URL state (searchParams), and persistent device state (localStorage).
Full answer, traps and step-by-step trace32 · State Architecture, Store Subscriptions, and Server Cache · Medium
Context API at Scale: Splitting & Selector Patterns
React Context notifies every subscribing component whenever its value reference changes, regardless of whether the component uses the modified property.
Full answer, traps and step-by-step trace33 · State Architecture, Store Subscriptions, and Server Cache · Medium
Zustand: Store Architecture & Fine-Grained Subscriptions
Zustand is a lightweight, hook-based state management library built on an external store model.
Full answer, traps and step-by-step trace34 · State Architecture, Store Subscriptions, and Server Cache · Medium
Server State vs Client State: TanStack Query Architecture
TanStack Query manages server state as an asynchronous remote cache governed by stale-while-revalidate semantics.
Full answer, traps and step-by-step trace35 · Advanced Component Design Patterns and Error Boundaries · Medium
Compound Components Pattern with Context Sharing
The Compound Components pattern allows multiple components to work together by implicitly sharing state through React Context, like native <select> and <option>. It provides an intuitive, expressive declarative API that inverts layout control to the consumer.
Full answer, traps and step-by-step trace36 · Advanced Component Design Patterns and Error Boundaries · Medium
Pattern Evolution: HOCs, Render Props & Custom Hooks
React code reuse evolved through three eras: Higher-Order Components (HOCs) suffered from wrapper hell and prop collisions; Render Props solved prop collision but created callback pyramid hell; Custom Hooks solved both by sharing stateful logic flatly…
Full answer, traps and step-by-step trace37 · Advanced Component Design Patterns and Error Boundaries · Medium
Error Boundaries: Declarative Exception Recovery
Error Boundaries are class components that catch JavaScript runtime errors during rendering, lifecycle methods, and constructors anywhere in their child tree, preventing full app crashes by displaying a fallback UI and logging exceptions to observability…
Full answer, traps and step-by-step trace38 · Advanced Component Design Patterns and Error Boundaries · Medium
Slot Pattern & Inversion of Control in UI Architecture
The Slot Pattern passes React elements as dedicated props (like header, footer, or sidebar) rather than restricting layout to children, achieving inversion of control, eliminating deep prop drilling, and decoupling container layout from child business logic.
Full answer, traps and step-by-step trace39 · Type-Safe React: Components, Generics, and Hooks · Easy
Typing Components, Props, Children & Events
In modern React TypeScript, type components as standard functions with typed prop interfaces rather than React.FC.
Full answer, traps and step-by-step trace40 · Type-Safe React: Components, Generics, and Hooks · Medium
Typing Hooks & Refs: State, Reducers & DOM Elements
TypeScript can infer simple hook states, but union states require explicit generics like useState<User | null>(null).
Full answer, traps and step-by-step trace41 · Frontend Security, Taint APIs, and Web Accessibility · Medium
React Security: XSS Prevention & dangerouslySetInnerHTML
React automatically defends against Cross-Site Scripting (XSS) by escaping all string values inside JSX before rendering to the DOM.
Full answer, traps and step-by-step trace42 · Frontend Security, Taint APIs, and Web Accessibility · Medium
Accessible Components: Keyboard Nav & Focus Management
Accessible React components comply with WAI-ARIA authoring practices by utilizing semantic HTML, proper ARIA states (aria-expanded, aria-selected), managing keyboard events (Arrow navigation, Escape, Enter), and programmatic focus management via useRef and…
Full answer, traps and step-by-step trace43 · Server-Side Rendering, Hydration, and Server Components · Medium
Server-Side Rendering (SSR) & Client Hydration Mechanics
Server-Side Rendering renders the initial React component tree to static HTML on the server for fast First Contentful Paint.
Full answer, traps and step-by-step trace44 · Unit Testing, Async Mocking, and Debugging Workflows · Medium
React Testing Library: Philosophy & Accessible Queries
React Testing Library tests components from the user perspective rather than implementation details.
Full answer, traps and step-by-step trace45 · Unit Testing, Async Mocking, and Debugging Workflows · Medium
Testing Async Components: API Mocking & Mock Service Worker (MSW)
Testing async components requires intercepting network requests at the network layer using Mock Service Worker (MSW) rather than mocking fetch or axios globals.
Full answer, traps and step-by-step trace46 · Unit Testing, Async Mocking, and Debugging Workflows · Medium
Testing Custom Hooks with renderHook & act()
Custom hooks must be tested within a React component execution context. React Testing Library provides renderHook to mount a test wrapper, expose result.current, and rerun hooks on rerender.
Full answer, traps and step-by-step trace47 · Tricky React Output Prediction & Execution Ordering · Medium
Output Traps: State Batching, Snapshots & Stale Closures
In React, state updates behave as immutable snapshots within the current render frame.
Full answer, traps and step-by-step trace48 · Tricky React Output Prediction & Execution Ordering · Medium
Output Traps: Effect Order, Cleanups & StrictMode
In a parent-child React tree, render phases execute top-down (parent before child), but commit passive effects execute bottom-up (children effects run before parent effects). When dependencies change, previous effect cleanups run before new effects execute.
Full answer, traps and step-by-step trace49 · Tricky React Output Prediction & Execution Ordering · Medium
Output Traps: React.memo & Referential Identity Pitfalls
React.memo uses shallow Object.is comparison on props. Passing inline object literals, arrays, or anonymous functions creates a new memory reference on every render, bypassing memoization.
Full answer, traps and step-by-step trace50 · Tricky React Output Prediction & Execution Ordering · Medium
Output Traps: Tree Position & Component Key Identity
In React reconciliation, component state is tied to its position in the render tree and its key prop. Changing the key prop forces React to destroy the existing Fiber node, unmount the component, and create a fresh instance with initial state.
Full answer, traps and step-by-step trace51 · Live Machine Coding Challenges and Custom Hooks · Medium
Machine Coding: useDebounce & useThrottle Custom Hooks
useDebounce delays updating a value until after a specified delay has elapsed since the last change, canceling previous timers in useEffect cleanup.
Full answer, traps and step-by-step trace52 · Live Machine Coding Challenges and Custom Hooks · Easy
Machine Coding: usePrevious & useIsMounted Hooks
usePrevious uses a mutable useRef to return the value from the preceding render pass before updating the ref in useEffect. useIsMounted returns a boolean callback indicating whether the component is currently mounted, preventing state updates after unmount.
Full answer, traps and step-by-step trace53 · Live Machine Coding Challenges and Custom Hooks · Medium
Machine Coding: Accessible Star Rating Widget
An accessible Star Rating widget requires managing hover and selected states, full keyboard navigation with Arrow keys and Home/End, ARIA radiogroup semantics with role="radiogroup" and aria-checked, and dynamic visual state updates without DOM manipulation.
Full answer, traps and step-by-step trace54 · Live Machine Coding Challenges and Custom Hooks · Medium
Machine Coding: Accessible Tabs Compound Component
The Accessible Tabs compound component shares active tab state via React Context between Tabs, TabList, Tab, and TabPanel.
Full answer, traps and step-by-step trace55 · Live Machine Coding Challenges and Custom Hooks · Medium
Machine Coding: Infinite Scroll with IntersectionObserver
Production infinite scroll uses the IntersectionObserver API attached to a sentinel element at the bottom of the list.
Full answer, traps and step-by-step trace
Applying for the role too? React developer resume examples