Kimi:

Complete React Interview Concept Map

Top-Level Ordered Roadmap

Phase Focus Area

1. Foundations Environment, JSX, Component Model, Props,

State

2. Component Behavior Events, Conditional Rendering, Lists & Keys,

Forms

3. Data Flow & Sharing Lifting State, Composition, Context

4. Effects & Lifecycle useEffect, Lifecycle Methods, Refs, Portals

5. Performance Memoization, [Link], useMemo,

useCallback, Virtual DOM, Reconciliation

6. Modern Patterns Custom Hooks, Error Boundaries, Code

Splitting, Suspense

7. Architecture State Management, Routing, Component

Patterns, Advanced Patterns

8. Interview Mastery Deep internals, edge cases, real-world

scenarios, system design with React

Section 1: Beginner — React Foundations

1.1 Why React & Core Philosophy
• Explanation: React is a declarative, component-based library for building
UIs. It uses a unidirectional data flow and promotes composition over
inheritance.
• Why it matters in interviews: Interviewers want to know you understand
why React exists—not just how to use it. This separates library users from
engineers.
• Common interview questions/traps:
Generated by [Link]
 – “Why React over vanilla JS?” (Answer: declarative UI, component
reusability, efficient DOM updates via reconciliation—not just “it’s
popular.”)
– “Is React a framework or a library?” (Trick: it’s a library; you need to
add routing, state management, etc.)
• Key subtopics: Declarative vs. imperative, component-based
architecture, learn once, write anywhere, unidirectional data flow.
1.2 JSX — JavaScript XML
• Explanation: JSX is syntactic sugar for [Link](). It
looks like HTML but compiles to JavaScript function calls. You can embed
expressions with {}.
• Why it matters in interviews: Interviewers test whether you know JSX is
not HTML in the browser and how it transforms.
• Common interview questions/traps:
– “Can you use React without JSX?” (Yes, with
[Link].)

– “Why must JSX expressions have a single parent?” (Each JSX

element maps to one createElement call; fragments solve this.)
– “What happens to class and for in JSX?” (They become
className and htmlFor to avoid JS reserved words.)

• Key subtopics: [Link] under the hood, fragments

(<>...</>), embedding expressions, conditional JSX, key and ref in
JSX, spread attributes.
1.3 Component Model
• Explanation: React applications are trees of components. Components
are reusable, isolated pieces of UI that return JSX. Two types: Function
Components and Class Components.
• Why it matters in interviews: You must articulate the shift from classes
to functions and why hooks replaced lifecycle methods.
• Common interview questions/traps:

Generated by [Link]
 – “What’s the difference between a function and class component?”
(Functions + Hooks are now standard; classes use this and
lifecycle methods.)
– “Can a React component return multiple elements?” (Yes, with
fragments.)
– “What makes a valid React component?” (It must start with a capital
letter and return something renderable.)
• Key subtopics: Function components, class components, pure
components, presentational vs. container components, component trees,
default props.
1.4 Props (Properties)
• Explanation: Props are read-only inputs passed from parent to child.
They make components reusable and configurable. Props flow down the
tree.
• Why it matters in interviews: Props are the foundation of React’s data
flow. Misunderstanding immutability of props is a red flag.
• Common interview questions/traps:
– “Are props mutable?” (No. Components must never modify their
own props.)
– “How do you pass data from child to parent?” (Via callback
functions passed as props—this is not reverse props flow.)
– “What happens if you mutate props?” (React won’t detect it; bugs
will be silent and hard to trace.)
• Key subtopics: Passing data down, callback props,
prop-types/TypeScript, default props, children prop, prop drilling,
destructuring props, spread operator with props.
1.5 State
• Explanation: State is mutable data owned by a component. When state
changes, React re-renders the component. In function components,
useState is the primary tool.

Generated by [Link]
 • Why it matters in interviews: State management is the core of React.
Interviewers probe for understanding of closures, batching, and
asynchronous updates.
• Common interview questions/traps:
– “Why can’t you update state directly?” (React won’t re-render;
always use the setter function.)
– “Is state update synchronous or asynchronous?” (State updates
may be batched; the new value isn’t available immediately after
calling the setter.)
– “What happens if you call setState multiple times in one event
handler?” (React batches them. Use the functional updater form if
the next state depends on the previous state.)
• Key subtopics: useState, functional updates, initial state laziness, state
batching, object vs. primitive state, derived state, state vs. props.

Section 2: Intermediate — Component Behavior & Interactivity

2.1 Event Handling
• Explanation: React wraps native DOM events in SyntheticEvent objects
for cross-browser consistency. Events are named in camelCase and
passed as functions (not strings).
• Why it matters in interviews: Understanding SyntheticEvent shows you
know React doesn’t just pass through browser events blindly.
• Common interview questions/traps:
– “What is SyntheticEvent?” (React’s cross-browser wrapper around
native events. It’s pooled in older React versions for performance.)
– “How do you pass arguments to event handlers?” (Use arrow
functions or .bind—but be aware of re-creation on every render.)
– “Why can’t you use return false to prevent default?” (You must
call [Link]() explicitly.)

Generated by [Link]
 • Key subtopics: SyntheticEvent, event pooling (legacy), passing
parameters, onClick vs. onSubmit, event delegation in React, preventing
default behavior.
2.2 Conditional Rendering
• Explanation: Render different UI based on state or props using
JavaScript logic (if, ternary ? :, logical &&).
• Why it matters in interviews: Simple but frequently tested for edge
cases, especially with 0, "", and false rendering.
• Common interview questions/traps:
– “What’s the difference between condition && <Component />
and condition ? <Component /> : null?” (&& can render 0 or
"" unexpectedly.)

– “How do you prevent a component from rendering?” (Return null.)

• Key subtopics: if statements, ternary operators, logical && pitfalls,
returning null, element variables, short-circuit evaluation traps.
2.3 Lists & Keys
• Explanation: When rendering arrays of elements, React needs a key
prop to identify which items changed, were added, or removed. Keys must
be stable and unique among siblings.
• Why it matters in interviews: This is one of the most commonly
misunderstood topics. Using index as key is a classic trap.
• Common interview questions/traps:
– “Why does React need keys?” (For reconciliation—to identify
elements across renders and minimize DOM operations.)
– “Can you use array index as a key?” (Only if the list is static and
never reordered/filtered. Otherwise, use unique IDs.)
– “What happens if you don’t provide a key?” (React uses index by
default, leading to bugs with reordering and state retention.)
– “Do keys need to be globally unique?” (No—only unique among
siblings.)
Generated by [Link]
 • Key subtopics: Key purpose in reconciliation, index vs. unique ID, stable
identity, keys and component state preservation, anti-patterns (random
keys, [Link]() as key).
2.4 Forms — Controlled vs. Uncontrolled Components
• Explanation: Controlled components have their value managed by React
state. Uncontrolled components store their own value in the DOM,
accessed via refs.
• Why it matters in interviews: This is a fundamental architectural
decision. Interviewers expect you to know when to use each.
• Common interview questions/traps:
– “What’s the difference between controlled and uncontrolled inputs?”
(Controlled: React owns the value. Uncontrolled: DOM owns the
value.)
– “When would you use an uncontrolled component?” (File inputs,
integrating non-React code, simple forms where re-rendering every
keystroke is expensive.)
– “How do you handle multiple form fields?” (Use a single state object
with computed property names or libraries like React Hook Form.)
– “What is a fully uncontrolled component with a key?” (Resetting a
component by changing its key prop.)
• Key subtopics: Controlled inputs (value + onChange), uncontrolled
inputs (defaultValue + ref), file inputs (always uncontrolled), form
validation patterns, handling multiple inputs, key as reset mechanism.

Section 3: Intermediate — Data Flow & Sharing

3.1 Lifting State Up
• Explanation: When multiple components need to share the same state,
move that state to their closest common ancestor and pass it down via
props.

Generated by [Link]
 • Why it matters in interviews: This is the canonical React pattern before
reaching for Context or Redux. Shows you understand React’s data flow
philosophy.
• Common interview questions/traps:
– “When should you lift state up?” (When two or more components
need to reflect the same changing data.)
– “What’s the downside of lifting state too high?” (Prop drilling—
passing props through many intermediate components that don’t
need them.)
• Key subtopics: Shared state ownership, inverse data flow (callbacks),
prop drilling problem, identifying the “source of truth.”
3.2 Component Composition
• Explanation: Composition is React’s primary reuse mechanism. Use
children prop and explicit component slots to build flexible, reusable
components.
• Why it matters in interviews: Interviewers prefer composition over
inheritance questions. React explicitly favors composition.
• Common interview questions/traps:
– “How do you share behavior between components?” (Composition,
custom hooks, HOCs, render props—not inheritance.)
– “What is the children prop?” (Whatever is between opening and
closing tags of a component.)
– “What are slots in React?” (Multiple composition points using
explicit props that accept elements.)
• Key subtopics: children prop, multiple slots, specialization
vs. containment, [Link], passing elements as props,
layout components.

Generated by [Link]
3.3 Context API
• Explanation: Context provides a way to pass data through the component
tree without prop drilling. It’s designed for globally shared data (theme,
auth, locale).
• Why it matters in interviews: Context is frequently misused for state
management. Interviewers test whether you know its limitations.
• Common interview questions/traps:
– “Does Context replace Redux?” (No. Context is for dependency
injection, not complex state management. It doesn’t provide
middleware, time-travel debugging, or optimized selectors.)
– “What happens when Context value changes?” (All consumers re-
render, even if they only use part of the value.)
– “How do you prevent unnecessary re-renders with Context?” (Split
into multiple contexts, or use a state management library with
selectors.)
– “When should you NOT use Context?” (For frequently changing
data or when only a few components need the data—prop drilling is
fine for shallow trees.)
• Key subtopics: [Link], Provider and Consumer,
useContext, default values, context splitting, context performance issues,
useReducer + Context as a lightweight state solution.

Section 4: Intermediate — Effects, Lifecycle & Refs

4.1 useEffect Hook
• Explanation: useEffect lets you perform side effects in function
components. It replaces componentDidMount, componentDidUpdate, and
componentWillUnmount from class components.

• Why it matters in interviews: This is the most important and most

misunderstood hook. Interviewers will deep-dive into dependency arrays
and cleanup.

Generated by [Link]
 • Common interview questions/traps:
– “What does the dependency array do?” (Controls when the effect
runs. Empty [] = mount/unmount only. Missing = every render.
Filled = when those values change.)
– “Why is my effect running twice in development?” (React 18 Strict
Mode intentionally double-invokes effects to help detect impure
setup/cleanup.)
– “How do you mimic componentDidMount?” (useEffect(() =>
{...}, []) — but remember it runs after paint, not before.)

– “What’s wrong with using objects or arrays in dependency arrays?”

(They are recreated each render, causing infinite loops. Use
primitives or memoize.)
– “When do you need a cleanup function?” (Subscriptions, timers,
event listeners, manual DOM mutations—anything that could leak
memory.)
• Key subtopics: Dependency array rules, cleanup functions, effect timing
(after paint), useLayoutEffect (synchronous, before paint), race
conditions in effects, fetching data in effects, exhaustive-deps ESLint rule.
4.2 Class Component Lifecycle (Legacy but Interview-Relevant)
• Explanation: Class components have mounting, updating, and
unmounting phases with specific methods. You must know these for
legacy codebases and deep interviews.
• Why it matters in interviews: Many codebases still use classes. Senior
interviews often ask you to convert class logic to hooks or explain lifecycle
nuances.
• Common interview questions/traps:
– “What are the three phases of a class component lifecycle?”
(Mounting, Updating, Unmounting.)

Generated by [Link]
 – “What’s the difference between componentDidMount and
useEffect?” (componentDidMount runs once after initial render;
useEffect runs after every render by default, controlled by deps.)

– “When should you use getDerivedStateFromProps?” (Rarely. It’s

an escape hatch when props need to initialize or update state.)
– “What is shouldComponentUpdate?” (Optimization hook to prevent
re-renders; replaced by [Link] and PureComponent.)
• Key subtopics: Mounting (constructor, render, componentDidMount),
Updating (render, componentDidUpdate), Unmounting
(componentWillUnmount), getDerivedStateFromProps,
getSnapshotBeforeUpdate, componentDidCatch, PureComponent,
shouldComponentUpdate.

4.3 Refs & the DOM

• Explanation: Refs provide a way to access DOM nodes or React
elements directly. They persist across renders without causing re-renders
when mutated.
• Why it matters in interviews: Refs are essential for imperative
operations (focus, animations, third-party libraries) and understanding
what React doesn’t control.
• Common interview questions/traps:
– “When should you use refs?” (Imperative DOM operations,
integrating non-React code, storing previous values without re-
rendering.)
– “Does updating a ref cause a re-render?” (No. Refs are mutable
and don’t trigger renders.)
– “What’s the difference between useRef and createRef?”
(createRef creates a new ref on every render; useRef persists the
same ref object across renders.)
– “Can you pass refs to functional components?” (Only with
[Link] or in React 19, ref is a regular prop.)

Generated by [Link]
 – “What are callback refs?” (A function that receives the DOM node,
useful for dynamic ref assignment.)
• Key subtopics: useRef, createRef, callback refs, forwardRef, ref
forwarding patterns, useImperativeHandle, refs vs. state, storing interval
IDs in refs, measuring DOM elements.
4.4 Portals
• Explanation: Portals let you render children into a DOM node that exists
outside the parent component’s DOM hierarchy.
• Why it matters in interviews: Important for modals, tooltips, and overlays
where CSS overflow: hidden or z-index stacking contexts cause
issues.
• Common interview questions/traps:
– “Does a portal break event bubbling?” (No. Event bubbling still
works according to the React tree, not the DOM tree.)
– “When would you use a portal?” (Modals, dropdowns, toasts—
anything that needs to escape parent CSS constraints.)
• Key subtopics: [Link], event bubbling through
portals, use cases (modals, tooltips).

Section 5: Advanced — Performance & Internals

5.1 Virtual DOM
• Explanation: The Virtual DOM is a lightweight JavaScript representation
of the actual DOM. React uses it to compute the minimal set of changes
needed before touching the real DOM.
• Why it matters in interviews: This is the most fundamental React
internal concept. You must explain it precisely—not just “it’s faster.”
• Common interview questions/traps:
– “What is the Virtual DOM?” (An in-memory tree of React elements.
Not a specific technology—just a pattern.)

Generated by [Link]
 – “Is Virtual DOM always faster than direct DOM manipulation?”
(No. It’s faster in complex, dynamic UIs because it batches and
minimizes DOM operations. For simple updates, direct DOM can be
faster.)
– “How does React diff the Virtual DOM?” (Element-by-element
comparison using keys, not tree-diffing algorithms like O(n³).)
• Key subtopics: React elements vs. DOM nodes, reconciliation process,
diffing algorithm, why React uses keys, render phase vs. commit phase.
5.2 Reconciliation
• Explanation: Reconciliation is React’s algorithm for diffing one tree with
another to determine which parts need to be changed in the DOM. It’s
O(n) and relies on two assumptions: different types produce different
trees, and keys hint at stable identity.
• Why it matters in interviews: Senior roles expect deep understanding of
how React decides what to update.
• Common interview questions/traps:
– “What are the two assumptions React’s diffing algorithm makes?”
(1. Two elements of different types produce different trees. 2. Keys
hint at which child elements are stable across renders.)
– “What happens when a component’s type changes at the same
position?” (React unmounts the old tree and mounts the new one
entirely—even if the types are similar.)
– “Why are keys important for reconciliation?” (They tell React
whether an element is the same logical item across renders.)
• Key subtopics: Diffing rules, type comparison, key-based matching,
component unmounting/remounting, reconciliation and state preservation.
5.3 Memoization — [Link], useMemo, useCallback
• Explanation: Memoization prevents unnecessary re-renders or
recalculations. [Link] memoizes components, useMemo memoizes
values, useCallback memoizes functions.

Generated by [Link]
 • Why it matters in interviews: Performance optimization is a senior-level
topic. Misusing memoization is worse than not using it—interviewers test
for nuance.
• Common interview questions/traps:
– “When should you use [Link]?” (When a component receives
the same props frequently but re-renders due to parent updates.
Not a default—memoization has a cost.)
– “What’s the difference between useMemo and useCallback?”
(useMemo returns a memoized value; useCallback returns a
memoized function. useCallback(fn, deps) is equivalent to
useMemo(() => fn, deps).)

– “Does [Link] do a shallow or deep comparison?” (Shallow.

Use a custom comparator for deep comparison, but that’s usually a
sign of wrong prop shapes.)
– “Why is my memoized component still re-rendering?” (Because a
parent passes a new object/array/function reference on every
render. Fix with useMemo/useCallback on the parent side.)
– “What are the costs of over-memoization?” (Memory overhead,
code complexity, and sometimes worse performance due to
comparison costs.)
• Key subtopics: [Link] and custom comparators, useMemo for
expensive calculations, useCallback for stable function references,
memoization dependency arrays, referential equality, prop reference
stability, when NOT to memoize.
5.4 Rendering Behavior & Batching
• Explanation: React batches state updates to minimize re-renders. In
React 18, automatic batching applies to all updates, including
setTimeout, promises, and native event handlers.

• Why it matters in interviews: Understanding when React re-renders

shows you grasp the core execution model.

Generated by [Link]
 • Common interview questions/traps:
– “If you call setState three times in one click handler, how many re-
renders happen?” (One—React batches them.)
– “What changed in React 18 regarding batching?” (Automatic
batching for all updates, not just React event handlers.)
– “How do you force a synchronous re-render?” (flushSync—but it’s
an escape hatch and can hurt performance.)
– “What is the render phase vs. commit phase?” (Render =
calculating what changes. Commit = applying changes to the DOM.
Render can be interrupted; commit cannot.)
• Key subtopics: Automatic batching (React 18), flushSync, render
phase, commit phase, concurrent rendering, time slicing, priority updates.

Section 6: Advanced — Modern Patterns & Error Handling

6.1 Custom Hooks
• Explanation: Custom hooks extract component logic into reusable
functions. They must start with use and can call other hooks. They don’t
share state—just logic.
• Why it matters in interviews: Custom hooks demonstrate you can
architect React applications, not just write components. Interviewers often
ask you to build one live.
• Common interview questions/traps:
– “What are the rules of hooks?” (1. Only call hooks at the top level—
not inside loops, conditions, or nested functions. 2. Only call hooks
from React functions or custom hooks.)
– “Do custom hooks share state?” (No. Each component gets its own
state when calling a custom hook.)
– “Build a useFetch hook.” (Must handle loading, error, data, cleanup
on unmount, and race conditions.)

Generated by [Link]
 – “What’s wrong with calling a hook conditionally?” (React relies on
call order to match state to hooks. Conditional calls break this.)
• Key subtopics: Rules of Hooks, extracting logic, hook composition,
usePrevious, useDebounce, useLocalStorage, useMediaQuery, testing
custom hooks.
6.2 Error Boundaries
• Explanation: Error boundaries are React components that catch
JavaScript errors anywhere in their child tree, log them, and display a
fallback UI. They only catch errors during rendering, lifecycle methods,
and constructors—not event handlers or async code.
• Why it matters in interviews: Error boundaries are the only way to
handle render-phase errors gracefully. Interviewers test the boundaries of
their capabilities.
• Common interview questions/traps:
– “Can you use error boundaries in function components?” (Not
directly. You must create a class component for
componentDidCatch or use a library.)

– “What errors do error boundaries NOT catch?” (Event handlers,

async code, server-side rendering, errors in the error boundary
itself.)
– “How do you reset an error boundary?” (Change the key prop or
use a reset callback pattern.)
• Key subtopics: componentDidCatch, static
getDerivedStateFromError, fallback UI, error logging, limitations, React
19 error boundary improvements.
6.3 Code Splitting & Lazy Loading
• Explanation: Code splitting breaks your bundle into smaller chunks
loaded on demand. React supports this via [Link] and dynamic
imports.

Generated by [Link]
 • Why it matters in interviews: Performance is critical at scale.
Interviewers want to know you can optimize initial load time.
• Common interview questions/traps:
– “What is [Link]?” (A function that lets you render a dynamic
import as a regular component.)
– “Can you use [Link] outside of Suspense?” (No. [Link]
components must be wrapped in a Suspense boundary with a
fallback.)
– “What are the tradeoffs of code splitting?” (More HTTP requests,
potential layout shift, need for loading states.)
• Key subtopics: Dynamic import(), [Link], Suspense for code
splitting, route-based splitting, preloading strategies, bundle analysis.
6.4 Suspense
• Explanation: Suspense lets components “wait” for something before
rendering—initially for code splitting, now expanding to data fetching (with
frameworks like [Link] or Relay).
• Why it matters in interviews: Suspense is a major modern React
paradigm. Interviewers test whether you understand it’s not just a loading
spinner wrapper.
• Common interview questions/traps:
– “Can Suspense be used for data fetching in vanilla React?” (Not
officially recommended without a framework or experimental APIs.)
– “What happens if multiple components inside Suspense are
loading?” (Suspense shows the fallback until ALL children are
ready.)
– “How do nested Suspense boundaries work?” (They show their
own fallbacks independently—inner boundaries don’t trigger outer
ones if already resolved.)
• Key subtopics: Suspense component, fallback UI, nested boundaries,
Suspense for data fetching (conceptual), startTransition.

Generated by [Link]
Section 7: Advanced — Architecture & State Management
7.1 State Management Patterns
• Explanation: Beyond useState, complex apps need patterns for global
state: lifting state, Context + useReducer, external libraries (Redux,
Zustand, Jotai, Recoil), or server-state libraries (React Query, SWR,
Apollo).
• Why it matters in interviews: Architecture decisions separate mid-level
from senior engineers. You must justify your choices.
• Common interview questions/traps:
– “When do you need Redux?” (Not for every app. Use it for complex
global state with many interdependent updates, time-travel
debugging needs, or middleware requirements.)
– “What’s the difference between client state and server state?”
(Client state = UI state (theme, form data). Server state = data from
API that needs caching, synchronization, and background updates.)
– “What is useReducer and when should you use it?” (For complex
state logic with multiple sub-values or when next state depends on
previous state. Cleaner than multiple useState calls.)
– “Compare Redux, Zustand, and Context.” (Redux: predictable,
middleware, devtools. Zustand: minimal, no providers. Context:
built-in, but no selectors and causes broad re-renders.)
• Key subtopics: useReducer, Redux core concepts (store, actions,
reducers, dispatch), Zustand, Jotai/Recoil (atomic state), React
Query/SWR (server state), normalized state, selectors, immutability
requirements.
7.2 Routing (React Router)
• Explanation: React Router is the standard library for routing in React. It
enables navigation without page reloads using the History API.

Generated by [Link]
 • Why it matters in interviews: Most React apps are SPAs. You need to
understand routing patterns, guards, and data loading.
• Common interview questions/traps:
– “What is client-side routing?” (Updating the URL and UI without a
server round-trip.)
– “How do you pass state through navigation?” (Using the state
property in useNavigate or <Link>.)
– “What are route guards and how do you implement them?”
(Protected routes using conditional rendering or layout routes that
check auth.)
– “What’s new in React Router v6/v7?” (Relative routes,
loader/action patterns, data APIs, simplified nested routing.)

– “How do you handle 404s?” (Catch-all route path="*".)

• Key subtopics: BrowserRouter, Routes, Route, Link, useNavigate,
useParams, useLocation, nested routes, protected routes, lazy-loaded
routes, data loaders (v6.4+).
7.3 Component Patterns (HOCs, Render Props, Compound Components)
• Explanation: Advanced patterns for sharing logic and building flexible
APIs. Modern React favors hooks, but these patterns still appear in legacy
code and specific use cases.
• Why it matters in interviews: Senior interviews test pattern recognition
and the ability to refactor legacy code to modern hooks.
• Common interview questions/traps:
– “What is a Higher-Order Component (HOC)?” (A function that takes
a component and returns a new component with additional
props/behavior.)
– “What are the drawbacks of HOCs?” (Prop name collisions, implicit
dependencies, harder to debug, wrapper hell.)
– “What is the Render Props pattern?” (A prop whose value is a
function that returns JSX, sharing logic between components.)

Generated by [Link]
 – “What are Compound Components?” (Components that work
together to form a complete UI, like <Select> and <Option>,
sharing state implicitly via Context.)
– “Why have hooks largely replaced HOCs and Render Props?”
(Cleaner code, no wrapper hell, easier composition, no prop
collision.)
• Key subtopics: HOCs (definition, examples like withRouter), Render
Props (children as function), Compound Components (Context-based
implicit state), Control Props pattern, State Reducer pattern, hooks as the
modern replacement.
7.4 React 18+ Concurrent Features
• Explanation: React 18 introduced concurrent rendering, allowing React to
interrupt and resume rendering work. Features include useTransition,
useDeferredValue, startTransition, and Suspense improvements.

• Why it matters in interviews: This is cutting-edge React. Senior roles

expect awareness of concurrent features.
• Common interview questions/traps:
– “What is concurrent rendering?” (React can prepare multiple
versions of the UI simultaneously and interrupt low-priority work for
urgent updates.)
– “What’s the difference between useTransition and
useDeferredValue?” (useTransition wraps a state update to
mark it as non-urgent. useDeferredValue defers a value to keep
the UI responsive.)
– “What is startTransition?” (A function to mark state updates as
transitions, keeping the UI responsive during heavy renders.)
– “What are the risks of concurrent features?” (Components may
render multiple times before committing; side effects must be
resilient.)

Generated by [Link]
 • Key subtopics: Concurrent rendering, useTransition,
useDeferredValue, startTransition, priority updates, Suspense
integration, breaking changes (Strict Mode double effects).
7.5 React Server Components (RSC)
• Explanation: Server Components render exclusively on the server. They
can access server-side resources directly (databases, file systems) and
reduce client-side JavaScript. They work alongside Client Components in
frameworks like [Link].
• Why it matters in interviews: This is the future of React architecture.
Senior and staff-level interviews now include RSC questions.
• Common interview questions/traps:
– “Can Server Components use hooks or browser APIs?” (No. They
run on the server and have no access to useState, useEffect,
window, or document.)

– “How do Server Components differ from SSR?” (SSR renders the

initial HTML on the server but still sends component JS to the
client. RSCs never ship their code to the client.)
– “Can you import a Client Component into a Server Component?”
(Yes. Can you import a Server Component into a Client
Component? Only as props/children, not via direct import.)
– “What is the ‘client boundary’?” (The "use client" directive marks
where server rendering stops and client rendering begins.)
• Key subtopics: Server vs. Client Components, "use client" directive,
"use server" (Server Actions), streaming, partial hydration, frameworks
([Link] App Router), when to use each.

Generated by [Link]
Section 8: Interview Mastery — Deep Concepts & Real-World
Scenarios
8.1 React Internals & Fiber
• Explanation: Fiber is React’s reconciliation engine (introduced in React
16). It’s a reimplementation of the stack that enables incremental
rendering, pause/resume, and priority-based updates.
• Why it matters in interviews: Staff+ and core UI engineering roles
expect knowledge of Fiber architecture.
• Common interview questions/traps:
– “What is React Fiber?” (A new reconciliation algorithm and
architecture that breaks rendering work into units, allowing
interruption and prioritization.)
– “What problem did Fiber solve?” (The old stack reconciler couldn’t
interrupt work, causing dropped frames during heavy updates.)
– “What is a work unit in Fiber?” (A small chunk of work that can be
paused, resumed, or abandoned.)
• Key subtopics: Stack reconciler vs. Fiber, work loop, priority levels,
double buffering (current vs. work-in-progress trees), time slicing.
8.2 Strict Mode
• Explanation: Strict Mode is a development-only tool that highlights
potential problems. In React 18, it intentionally double-invokes certain
functions (render, effects, state updaters) to detect side effects.
• Why it matters in interviews: Many “bugs” reported in development are
actually Strict Mode catching impure code. Understanding this prevents
panic.
• Common interview questions/traps:
– “Why does my component render twice?” (React 18 Strict Mode
intentionally double-invokes renders and effects in development to
detect impurity.)
– “Does Strict Mode affect production?” (No. It’s development-only.)
Generated by [Link]
 – “What does Strict Mode check?” (Unsafe lifecycles, legacy string
refs, side effects in render, missing keys, deprecated APIs.)
• Key subtopics: Double invocation in development, detecting impure
functions, identifying unsafe patterns, migration aid.
8.3 Testing React Components
• Explanation: React testing involves unit tests for components, hooks, and
integration tests for user flows. Primary tools: React Testing Library (RTL),
Jest, Vitest.
• Why it matters in interviews: Testing philosophy is part of code quality
discussions. Interviewers prefer Testing Library’s “test like a user”
approach.
• Common interview questions/traps:
– “What’s the Testing Library philosophy?” (Test behavior, not
implementation. Query by accessibility roles/labels, not test IDs or
CSS classes.)
– “How do you test a custom hook?” (Use
@testing-library/react-hooks or render a test component that
uses the hook.)
– “What’s the difference between [Link] and
[Link]?” (getBy is synchronous; findBy is async and
waits for the element to appear.)
– “Should you test implementation details?” (No. Testing if a function
was called is fragile. Test what the user sees.)
• Key subtopics: RTL queries (getBy, findBy, queryBy), user events
vs. fireEvent, mocking hooks and context, testing async behavior,
snapshot testing (when appropriate), E2E with Playwright/Cypress.
8.4 TypeScript with React
• Explanation: TypeScript adds static typing to React. Key patterns: typing
props with interfaces, generic components, event types, and hook return
types.

Generated by [Link]
 • Why it matters in interviews: Most production React code uses
TypeScript. You must type common patterns confidently.
• Common interview questions/traps:
– “How do you type the children prop?” ([Link] is the
most permissive; [Link] for single elements.)
– “How do you type a generic component?” (function
List<T>({ items }: { items: T[] }) {...})

– “What’s the difference between [Link] and regular function

components?” ([Link] implicitly includes children and
displayName—opinions vary on its use.)

– “How do you type useRef for DOM elements?”

(useRef<HTMLInputElement>(null))
– “How do you type event handlers?”
([Link]<HTMLButtonElement>,
[Link]<HTMLInputElement>, etc.)

• Key subtopics: Props interfaces, [Link],

[Link], event types, generic components, forwardRef typing,
context typing, discriminated unions for component variants.
8.5 Security in React
• Explanation: React provides built-in XSS protections via automatic
escaping in JSX. However, dangerous patterns like
dangerouslySetInnerHTML and improper URL handling can introduce
vulnerabilities.
• Why it matters in interviews: Security awareness is expected at senior
levels.
• Common interview questions/traps:
– “Is React safe from XSS by default?” (Mostly yes—JSX escapes
values. But dangerouslySetInnerHTML bypasses this.)

Generated by [Link]
 – “What is dangerouslySetInnerHTML and when is it safe?” (Only
use with sanitized HTML from a trusted source. Never with user
input.)
– “How do you prevent XSS in URLs?” (Validate javascript: URLs
in user-provided links.)
• Key subtopics: JSX escaping, dangerouslySetInnerHTML, URL
validation, CSRF protection (not React-specific but relevant), dependency
vulnerabilities.
8.6 Common Anti-Patterns & Pitfalls
• Explanation: Patterns that seem correct but cause bugs or performance
issues: mutating state, derived state from props without memoization,
inline function definitions in render, overusing useEffect, prop drilling
instead of composition.
• Why it matters in interviews: Recognizing anti-patterns shows maturity.
Interviewers often present code with intentional bugs.
• Common interview questions/traps:
– “What’s wrong with setState({ ...state, count:
[Link] + 1 })?” (Nothing, if state is an object. But if state
is stale due to closures, use functional updates.)
– “Why is useEffect(() => { setState(...) }, []) sometimes
wrong?” (If it depends on props that change, missing dependencies
cause stale closures.)
– “What’s the ‘derived state’ anti-pattern?” (Copying props into state
and trying to keep them in sync. Use fully controlled or fully
uncontrolled with a key.)
– “Why are inline arrow functions in JSX bad?” (They create new
references every render, breaking [Link] child optimizations.)
• Key subtopics: State mutation, stale closures, missing effect
dependencies, derived state, inline functions, over-rendering, useEffect
overuse, key misuse.

Generated by [Link]
Final Interview Checklist
Before walking into any React technical interview, you must be able to explain
confidently:
Foundations
• ☐ What is JSX and how does it compile?
• ☐ The difference between props and state
• ☐ Why props are read-only
• ☐ How state updates trigger re-renders
• ☐ Controlled vs. uncontrolled components
Component Behavior
• ☐ How to handle events and what SyntheticEvent is
• ☐ Conditional rendering patterns and && pitfalls
• ☐ Why keys are critical and what happens with index-as-key
• ☐ Form handling strategies
Data Flow
• ☐ Lifting state up and when to do it
• ☐ Component composition with children and slots
• ☐ Context API: when to use it, when to avoid it, performance implications
• ☐ Prop drilling: problem and solutions
Effects & Lifecycle
• ☐ useEffect dependency array rules and cleanup
• ☐ The difference between useEffect and useLayoutEffect
• ☐ Class component lifecycle methods (for legacy code)
• ☐ Refs: useRef, forwardRef, useImperativeHandle
• ☐ Rules of Hooks and why they exist
Performance
• ☐ Virtual DOM and how it works (accurately, not vaguely)

Generated by [Link]
 • ☐ Reconciliation and the diffing algorithm’s assumptions
• ☐ When and how to use [Link], useMemo, useCallback
• ☐ React 18 automatic batching and concurrent rendering basics
• ☐ Render phase vs. commit phase
Modern React
• ☐ Custom hooks: design, rules, and testing
• ☐ Error boundaries: what they catch and what they don’t
• ☐ Code splitting with [Link] and Suspense
• ☐ useTransition, useDeferredValue, and startTransition
• ☐ React Server Components: what they are, what they can/cannot do
Architecture
• ☐ State management tradeoffs (Context vs. Redux vs. Zustand vs. React
Query)
• ☐ Client state vs. server state
• ☐ React Router fundamentals and protected routes
• ☐ HOCs, Render Props, Compound Components (legacy patterns)
• ☐ Component composition over inheritance
Deep Knowledge
• ☐ React Fiber: what problem it solves
• ☐ Strict Mode double invocation in React 18
• ☐ TypeScript patterns for React components
• ☐ React Testing Library philosophy
• ☐ Security: XSS prevention and dangerouslySetInnerHTML
Anti-Patterns
• ☐ State mutation and why it breaks React
• ☐ Stale closures in hooks
• ☐ Missing effect dependencies
• ☐ Derived state from props

Generated by [Link]
 • ☐ Inline function references breaking memoization

Study Strategy: Go through this map sequentially. For each topic, be able to
explain it in 60 seconds, write a small code example from memory, and answer
the trap questions listed. If you can’t—study that topic until you can teach it to
someone else.

Generated by [Link]