Loading compiler resources...

20 Essential React Interview Questions & Answers (Mid-Level Developer Edition) | DeepFrontend

20 Essential React Interview Questions & Answers (Mid-Level Developer Edition)

Q: What is the Virtual DOM, and how does React's Reconciliation process work?

The Virtual DOM (VDOM) is a lightweight JavaScript object representation of the real DOM tree kept in browser memory. When state changes, React builds a new Virtual DOM tree, compares it against the previous tree using a diffing heuristic called Reconciliation, and calculates the minimum batch of changes needed before updating the real DOM.

Q: What is the fundamental difference between State and Props in React?

- Props are external inputs passed into a component from its parent (like function arguments). They are read-only and immutable from the perspective of the child component. - State is internal data managed and owned by the component itself (via \useState\ or \useReducer\). It changes over time in response to user actions or network events.

Q: Why do list items require a \`key\` prop, and why is using an array index dangerous?

React uses the \key\ prop during reconciliation to identify which items in a list have been added, moved, updated, or removed. A stable key prevents React from recreating existing DOM nodes.

Q: What is the difference between Controlled and Uncontrolled Components?

- Controlled Component: Form input data is handled directly by React state. The component's value is set via \value={state}\ and updated via \onChange\. React is the "single source of truth". - Uncontrolled Component: Form input data is stored directly in the browser DOM. Values are pulled on demand using a \ref\ (e.g. \inputRef.current.value\).

Q: What are the Rules of Hooks, and why do they exist?

1. Only call hooks at the top level: Do not call hooks inside loops, conditions, or nested functions. 2. Only call hooks from React function components or custom hooks.

Q: How does \`useEffect\` work, and what is the purpose of the Cleanup function?

\useEffect\ allows you to synchronize your component with an external system (APIs, DOM events, timers). It runs after the browser has painted the screen.

Q: What is the difference between \`useMemo\` and \`useCallback\`, and when should you avoid them?

- \useMemo\ caches the result of a calculation: \const memoizedValue = useMemo(() => computeHeavy(a, b), [a, b]);\ - \useCallback\ caches the function definition itself between renders: \const memoizedFn = useCallback(() => doSomething(a), [a]);\

Q: What is the difference between \`useRef\` and \`useState\`?

- Both persist values across component re-renders. - \useState\ triggers a re-render when the state is updated. - \useRef\ does NOT trigger a re-render when \ref.current\ is mutated.

Q: What triggers a component to re-render in React?

A React component re-renders if and only if: 1. Its own state changes (via \useState\ or \useReducer\ dispatch). 2. Its parent component re-renders (by default, all children re-render regardless of whether their props changed). 3. A Context value it consumes changes (via \useContext\).

Preparing for a Mid-Level (L4 / Mid-Senior) Frontend Interview?

If you have 1 to 4 years of experience with React, interviewers aren't testing you on whether you can write a basic onClick handler. They want to know:

Do you understand how React actually executes and renders?

Can you avoid common performance traps like unnecessary re-renders and stale closures?

Do you write clean, predictable state and component architectures?

Here are the 20 most frequently asked React interview questions, broken down with concise mental models, clear code examples, and the specific traps interviewers look for.

Part 1: Core Fundamentals & JSX (Q1 - Q4)
Part 2: Hooks & State Management (Q5 - Q9)
Part 3: Component Lifecycle & Rendering (Q10 - Q13)
Part 4: Performance, Data Fetching & Side Effects (Q14 - Q17)
Part 5: Architecture & Modern React (Q18 - Q20)
Explore All DeepFrontend Curriculum Topics

Part 1: Core Fundamentals & JSX

Q1: What is the Virtual DOM, and how does React's Reconciliation process work?

The 30-Second Answer: The Virtual DOM (VDOM) is a lightweight JavaScript object representation of the real DOM tree kept in browser memory. When state changes, React builds a new Virtual DOM tree, compares it against the previous tree using a diffing heuristic called Reconciliation, and calculates the minimum batch of changes needed before updating the real DOM.

The Detailed Breakdown: Directly manipulating the real browser DOM (via document.createElement or innerHTML) is fast, but triggering subsequent browser layout recalculation (reflow) and repaints across large subtrees is slow. React minimizes layout thrashing by:

Render Phase: Comparing the old VDOM against the new VDOM to find differences (O(n) heuristic algorithm).
Commit Phase: Batch-applying only the changed DOM attributes and nodes in a single paint operation.

// Conceptual representation of a React VDOM element
const vdomElement = {
  type: 'button',
  props: {
    className: 'btn-primary',
    children: 'Submit Order',
    onClick: [Function: handleClick]
  }
};

Interviewer Tip: Emphasize that in modern React (React 18 & 19), the Virtual DOM is implemented as a Fiber architecture, which allows React to break rendering work into interruptible chunks rather than blocking the browser main thread.

Q2: What is the fundamental difference between State and Props in React?

The 30-Second Answer:

Props are external inputs passed into a component from its parent (like function arguments). They are read-only and immutable from the perspective of the child component.
State is internal data managed and owned by the component itself (via useState or useReducer). It changes over time in response to user actions or network events.

Characteristic	Props	State
Origin	Passed from parent component	Managed internally within component
Mutability	Read-only (Immutable)	Mutable via state updater functions
Trigger Re-render?	Yes, if the parent passes new values	Yes, calling `setState` triggers re-render
Usage

interface UserCardProps {
  name: string; // Prop: given by parent
}
 
export function UserCard({ name }: UserCardProps) {
  const [isFollowing, setIsFollowing] = useState(false); // State: local to this card
 
  return (
    <div>
      <h3>{name}</h3>
      <button onClick={() => setIsFollowing((prev) => !prev)}>
        {

Q3: Why do list items require a `key` prop, and why is using an array index dangerous?

The 30-Second Answer: React uses the key prop during reconciliation to identify which items in a list have been added, moved, updated, or removed. A stable key prevents React from recreating existing DOM nodes.

The Danger of Index as Key: If items in a list are re-ordered, sorted, prepended, or deleted, using the array index (key={index}) confuses React's diffing engine:

If you prepend an item to the top of an array, the new item gets index 0.
React thinks index 0 merely changed its props rather than being a newly inserted element.
This causes subtle state bugs where uncontrolled inputs, checkboxes, or animation states remain bound to the wrong DOM node!

// ❌ BAD: Index as key breaks input state when items are sorted or prepended
{items.map((item, index) => (
  <TodoRow key={index} item={item} />
))}
 
// ✅ GOOD: Stable, unique business identifier
{items.map((item) => (
  <TodoRow key={item.id} item={item} />
))}

Rule of Thumb: Only use index as a key if the list is strictly static (never reordered, filtered, or mutated). Otherwise, always use a unique ID (e.g. database ID or generated UUID).

Q4: What is the difference between Controlled and Uncontrolled Components?

The 30-Second Answer:

Controlled Component: Form input data is handled directly by React state. The component's value is set via value={state} and updated via onChange. React is the "single source of truth".
Uncontrolled Component: Form input data is stored directly in the browser DOM. Values are pulled on demand using a ref (e.g. inputRef.current.value).

// 1. Controlled: React holds the state
export function ControlledForm() {
  const [email, setEmail] = useState("");
  return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
}
 
// 2. Uncontrolled: DOM holds the state, read via ref
export function UncontrolledForm() {
  const emailRef = useRef<HTMLInputElement>(null);
 
  const handleSubmit = (e: React.FormEvent) =>

When to use which:

Use Controlled when you need instant inline validation, dynamic disabling of submit buttons, or conditional formatting.
Use Uncontrolled (or libraries like React Hook Form) for massive forms to avoid re-rendering the whole form on every single keystroke.

Part 2: Hooks & State Management

Q5: What are the Rules of Hooks, and why do they exist?

The 30-Second Answer:

Only call hooks at the top level: Do not call hooks inside loops, conditions, or nested functions.
Only call hooks from React function components or custom hooks.

Why does this rule exist? React does not identify hooks by property names. Internally, React stores all hooks for a component as a singly linked list ordered by their execution call sequence:

Hook 1: useState("query")  -->  Hook 2: useEffect()  -->  Hook 3: useState(0)

If a hook is placed inside an if (condition) statement that skips execution on a subsequent render, the internal pointer shifts out of sync. Hook 3 will read the state of Hook 2, causing silent state corruption or crashes!

Q6: How does `useEffect` work, and what is the purpose of the Cleanup function?

The 30-Second Answer: useEffect allows you to synchronize your component with an external system (APIs, DOM events, timers). It runs after the browser has painted the screen.

The Lifecycle of useEffect:

No Dependency Array (useEffect(fn)): Runs after every render.
Empty Dependency Array (useEffect(fn, [])): Runs once after initial mount.
With Dependencies (useEffect(fn, [id])): Runs on mount and whenever any dependency value changes by reference (Object.is).

The Cleanup Function: A function returned by the effect callback. It runs:

Before the effect re-runs with new values (clearing previous subscriptions).
When the component unmounts from the DOM.

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", handleResize);
 
  // Cleanup: Prevents memory leaks when component unmounts
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

Q7: What is a "Stale Closure" in React Hooks, and how do you fix it?

The 30-Second Answer: In JavaScript, a closure captures variables from its lexical scope at the time the function is created. If a React callback (such as setInterval or setTimeout inside useEffect) captures state from an earlier render without listing it in the dependency array, it continues referencing the old ("stale") value indefinitely.

// ❌ BUG: Stale Closure
export function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
      // 'count' is captured as 0 when mounted. It will always set 0 + 1 = 1!
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // Missing count dependency
 
  return <div>{count}</div>;
}

The Two Solutions:

Use Functional State Updates (Best practice):

// ✅ Passed updater function receives latest state from React
setCount((prev) => prev + 1);

Include the dependency in the array (or use a ref to track the mutable value if re-subscribing is costly).

Q8: What is the difference between `useMemo` and `useCallback`, and when should you avoid them?

The 30-Second Answer:

useMemo caches the result of a calculation: const memoizedValue = useMemo(() => computeHeavy(a, b), [a, b]);
useCallback caches the function definition itself between renders: const memoizedFn = useCallback(() => doSomething(a), [a]);

(In fact, useCallback(fn, deps) is just syntactic sugar for useMemo(() => fn, deps).)

// useMemo caches an expensive transformed list
const filteredProducts = useMemo(() => {
  return products.filter((p) => p.category === activeCategory);
}, [products, activeCategory]);
 
// useCallback preserves function reference so child memoization does not break
const handleSelect = useCallback((id: string) => {
  setSelectedId(id);
}, []);

When NOT to use them: Do not wrap every function or simple calculation in useCallback / useMemo!

Creating closures and dependency array comparisons has its own CPU and memory overhead.
For cheap operations like filtering 10 items or basic arithmetic, the overhead of the hook is higher than recalculating.
Only use them when:
1. Passing callbacks to a child component wrapped in React.memo.
2. The function is a dependency in another hook's dependency array (useEffect).
3. The calculation is verifiably expensive (e.g. processing 10,000 items).

Q9: What is the difference between `useRef` and `useState`?

The 30-Second Answer:

Both persist values across component re-renders.
useState triggers a re-render when the state is updated.
useRef does NOT trigger a re-render when ref.current is mutated.

export function Timer() {
  const [seconds, setSeconds] = useState(0); // Changes UI -> Triggers render
  const timerId = useRef<NodeJS.Timeout | null>(null); // Storing interval ID -> No render needed
 
  const start = () => {
    if (timerId.current !== null) return;
    timerId.current = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

Two primary use cases for useRef:

Direct DOM node access (focus input, measuring scroll height, canvas manipulation).
Storing mutable instance variables that do not affect the visual UI output (e.g. interval IDs, previous prop values).

Part 3: Component Lifecycle & Rendering

Q10: What triggers a component to re-render in React?

The 30-Second Answer: A React component re-renders if and only if:

Its own state changes (via useState or useReducer dispatch).
Its parent component re-renders (by default, all children re-render regardless of whether their props changed).
A Context value it consumes changes (via useContext).

Common Misconception: "A component re-renders when its props change." Correction: If a parent re-renders, the child re-renders even if its props did not change at all, unless the child is explicitly wrapped in React.memo!

Q11: How does the Context API work, and what is the "re-render all consumers" problem?

The 30-Second Answer: React Context provides a way to pass data deeply down a component tree without manually passing props at every level ("prop drilling").

The Performance Problem: Whenever the value passed to a <Context.Provider value={value}> changes by reference, every component that calls useContext(MyContext) will re-render, even if that component only cares about a tiny property of the context that didn't change!

// ❌ POTENTIAL ISSUE: Any change to theme re-renders components that only need user
const AppContext = createContext<{ user: User; theme: string } | null>(null);

How to solve it:

Split Contexts: Separate state by domain (e.g. UserContext vs. ThemeContext).

Memoize the Provider value: Ensure the value object has a stable reference:

const value = useMemo(() => ({ user, setUser }), [user]);
return <UserContext.Provider value={value}>{children}</UserContext.Provider>;

Use specialized state libraries (like Zustand or Jotai) which support fine-grained selector subscriptions.

Q12: What is "Prop Drilling", and what are 3 clean ways to avoid it?

The 30-Second Answer: Prop drilling occurs when you pass props through multiple intermediate components that do not need the data themselves, solely to reach a deeply nested child component.

3 Clean Solutions:

Component Composition (Often overlooked!): Instead of passing props down, pass the fully-formed child component down via children:

// Instead of <Dashboard user={user} /> -> <Sidebar user={user} /> -> <Avatar user={user} />
<Dashboard sidebar={<Avatar user={user} />} />

React Context API: Ideal for global or feature-level state like authentication, themes, or localization.
External State Management: Use stores with selector hooks (like Zustand, Redux Toolkit, or Jotai) where any component can directly subscribe to state slices.

Q13: How does `React.memo` work, and why does passing inline functions or objects break it?

The 30-Second Answer: React.memo is a Higher-Order Component that skips re-rendering a component if its new props are shallowly equal to its previous props (Object.is equality check on each prop).

const ExpensiveList = React.memo(function ExpensiveList({ items, onItemClick }: Props) {
  return <div>{/* 5,000 items rendered */}</div>;
});

Why inline objects and functions break memoization: In JavaScript, object and function literals create a brand-new memory reference on every render:

// ❌ BUG: Broken memoization!
export function Parent() {
  return (
    // 'style' and 'onClick' create NEW object/function references on EVERY render!
    <ExpensiveList
      style={{ padding: 12 }}
      onItemClick={(id) => console.log(id)}
    />
  );
}

Even though ExpensiveList is wrapped in React.memo, React checks prevProps.onItemClick === nextProps.onItemClick. Because the references differ, React.memo assumes props changed and re-renders anyway!

The Fix: Wrap the function in useCallback and memoize or hoist the object with useMemo or outside component scope.

Part 4: Performance, Data Fetching & Side Effects

Q14: How should you fetch data in modern React (`useEffect` vs. TanStack Query)?

The 30-Second Answer: While fetching data inside useEffect with fetch() is fine for trivial prototypes, modern production applications use dedicated server-state libraries like TanStack Query (React Query) or SWR (or React 19 / Next.js Server Components).

// ❌ NAIVE: useEffect data fetching has race conditions, no caching, manual loading states
useEffect(() => {
  let isCancelled = false;
  fetchUser(id).then((data) => {
    if (!isCancelled) setUser(data);
  });
  return () => { isCancelled = true; };
}, [id]);
 
// ✅ PRODUCTION: TanStack Query provides caching, deduping, retry, refetch on window focus
const { data: user, isLoading, error } = useQuery({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),

Why TanStack Query is superior for interviews: Mention the 5 problems it solves out of the box:

Deduplication of identical requests across components.
Background caching and optimistic updates.
Automatic refetch on window focus or network reconnect.
Pagination and infinite scroll helpers.
Elimination of race conditions and memory leak cleanup boilerplate.

Q15: What are Error Boundaries in React, and what errors do they NOT catch?

The 30-Second Answer: An Error Boundary is a React component that catches JavaScript errors anywhere in its child component tree, logs the error, and displays a graceful fallback UI instead of crashing the entire application.

In React, Error Boundaries must be class components using getDerivedStateFromError and componentDidCatch (or using the popular react-error-boundary package).

What Error Boundaries DO NOT catch (Critical interview trap!):

Event handlers (e.g. onClick errors — use standard try/catch here).
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks).
Server-Side Rendering (SSR) errors.
Errors thrown inside the Error Boundary itself (rather than in its children).

class ErrorBoundary extends React.Component<Props, { hasError: boolean }> {
  state = { hasError: false };
 
  static getDerivedStateFromError(error: Error) {
    return { hasError: true }; // Updates state so the next render shows fallback
  }
 
  componentDidCatch(error: Error, info: React.ErrorInfo) {
    logErrorToService(error, info);
  }
 
  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong. Please reload.</

Q16: What is Code Splitting and how do `React.lazy` and `<Suspense>` work?

The 30-Second Answer: By default, Webpack or Vite bundles all your application code into a single large JavaScript file. Code Splitting splits this bundle into smaller chunks that are loaded on demand when the user actually navigates to that feature, drastically improving initial page load time.

import React, { Suspense, lazy } from "react";
 
// AdminPanel bundle will NOT be downloaded until this component renders!
const AdminPanel = lazy(() => import("./AdminPanel"));
 
export function App() {
  return (
    <div>
      <Navbar />
      <Suspense fallback={<div className="spinner">Loading Admin Panel...</div>}>
        <AdminPanel />
      </Suspense>
    </div>
  );
}

React.lazy takes a dynamic import() statement and returns a React component promise.
<Suspense> specifies a fallback UI (like a skeleton loader or spinner) while the bundle chunk is being fetched over the network.

Q17: What is the difference between `useEffect` and `useLayoutEffect`?

The 30-Second Answer:

useEffect runs asynchronously AFTER the browser paints the screen. It does not block user visual updates. (Use for 98% of cases: API calls, event listeners).
useLayoutEffect runs synchronously BEFORE the browser paints the screen, immediately after DOM mutations. (Use for measuring DOM nodes like tooltips, popovers, or scroll positions to avoid visual flickering).

Render Component -> DOM Mutated -> useLayoutEffect (Blocks Paint) -> Browser Paints -> useEffect

// Use useLayoutEffect to measure element dimensions before the user sees it
useLayoutEffect(() => {
  const { height } = tooltipRef.current.getBoundingClientRect();
  setOffset(height + 8); // Updated BEFORE paint, so no visual jumping!
}, []);

Part 5: Architecture & Modern React

Q18: What are Custom Hooks, and how do you build one?

The 30-Second Answer: A Custom Hook is a JavaScript function whose name starts with "use" and which can call other React hooks. Custom hooks allow you to extract and share stateful logic between components without duplicating code or changing the component hierarchy.

Example: A Production useDebounce Hook

import { useState, useEffect } from "react";
 
export function useDebounce<T>(value: T, delayMs: number = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delayMs);
 
    // Cleanup: Resets timer if value changes before delay finishes
    return () => clearTimeout(handler);
  }, [value, delayMs]);

Q19: What is the difference between React Server Components (RSC) and Client Components?

The 30-Second Answer: In modern React (React 19 / Next.js App Router):

Server Components (Default): Execute only on the server. They never send JavaScript to the client browser, can query databases directly, and have zero impact on bundle size. They cannot use browser APIs or state hooks (useState, useEffect).
Client Components ("use client"): Pre-rendered on the server and hydrated in the browser. They have access to browser APIs, user event listeners (onClick), and React state hooks.

Feature	Server Components (RSC)	Client Components (`"use client"`)
Execution Environment	Server only	Server (initial HTML) + Browser
Client Bundle Size	0 KB	Includes component JS
Can use `useState` / `useEffect`?	❌ No	✅ Yes

Q20: What is Automatic Batching in modern React (React 18 & 19)?

The 30-Second Answer: Batching is when React groups multiple state update calls into a single re-render pass to optimize performance.

In React 17 and earlier: React only batched updates inside native React event handlers (like onClick). Updates inside setTimeout, Promise.then, or fetch callbacks were NOT batched and triggered separate re-renders.
In React 18+ (Automatic Batching): React batches all state updates automatically, regardless of whether they happen in event handlers, promises, timeouts, or native events.

function handleFetch() {
  fetch("/api/user").then(() => {
    // In React 17: Triggered 2 separate re-renders!
    // In React 18+: Automatically batched into 1 re-render!
    setIsLoading(false);
    setUser(data);
  });
}

(If you ever need to opt out of batching for an urgent DOM update, you can use flushSync(() => setState(...)).)

Explore All DeepFrontend Curriculum Topics

Want to master these concepts with interactive live code playgrounds, visual execution simulators, and active-recall quizzes? DeepFrontend provides 315+ in-depth topics across 25 domains.

Below are direct links to explore every related domain and topic available on the platform:

⚛️ 1. Complete React Curriculum (All 20 Topics)

React Fundamentals

Components — Function components, purity, and component mental models.
JSX — JSX compilation, createElement, expressions, and fragments.
Props — Immutability, default props, children, and typing with TypeScript.
State — useState, immutability rules, and state updater queues.
Rendering Lifecycle — Trigger, Render, and Commit phases explained visually.

Hooks in Depth

Hooks Overview — Rules of hooks, linked-list hook storage, and call sequences.
Custom Hooks — Reusable headless logic patterns and real-world hooks.
Refs & the DOM — useRef, forwardRef, DOM measurements, and instance values.
Context API — Provider patterns, consumer re-render optimizations, and splitting.
Forms (Controlled & Uncontrolled) — Form architecture, validation, and React Hook Form.

Advanced React & Production Patterns

Suspense — Concurrent data-fetching boundaries and fallback coordination.
Error Boundaries — Fault tolerance, componentDidCatch, and recovery trees.
Server Components — RSC wire format, serialization, and boundary rules.
Reconciliation & the Virtual DOM — Diffing heuristics, fiber trees, and key algorithms.
Concurrent Features — useTransition, useDeferredValue, and priority lanes.

🌐 2. Frameworks & State Management

Next.js & Fullstack

Modern State Management

Zustand — Minimalist flux store with custom selectors.
Jotai — Atomic state management primitives.
Recoil — Graph-based atom and selector states.
MobX — Observable state and transparent reactive programming.
Redux Learning Hub — Redux Toolkit (RTK), slices, and middleware.

⚡ 3. Frontend Performance & Core Web Vitals

Core Web Vitals (LCP, CLS, INP) — Measuring and passing Google's UX vitals.
Lighthouse & Performance Auditing — Automated profiling and audit budgets.
Runtime Profiling & Memory Leaks — Chrome DevTools heap snapshots.
Code Splitting & Lazy Loading — Dynamic imports and bundle optimization.
Memoization Patterns — Avoiding cache thrashing and memory overhead.
— High-throughput rendering optimizations.

📚 4. All 25 DeepFrontend Learning Hubs

Explore all foundational tracks across web engineering:

Core Web Foundations (11 topics)
HTML Mastery (11 topics)
CSS & Modern Layouts (16 topics)
JavaScript Deep Dive (23 topics)
TypeScript Enterprise (14 topics)
React Architecture (20 topics)

Final Interview Advice

When answering React questions in a mid-level interview:

Lead with the direct answer first (1-2 sentences), then expand with an example.
Mention trade-offs (e.g. "useMemo is great for expensive filters, but adds memory overhead for cheap operations").
Connect concepts to user experience (e.g. "Keys prevent UI glitches; code-splitting improves Largest Contentful Paint").

Bookmark this guide, dive into the topic modules linked above, and practice explaining each concept out loud. Good luck with your upcoming interviews!

20 Essential React Interview Questions & Answers (Mid-Level Developer Edition)

Quick Navigation#

Part 1: Core Fundamentals & JSX#

Q1: What is the Virtual DOM, and how does React's Reconciliation process work?#

Q2: What is the fundamental difference between State and Props in React?#

Q3: Why do list items require a key prop, and why is using an array index dangerous?#

Q4: What is the difference between Controlled and Uncontrolled Components?#

Part 2: Hooks & State Management#

Q5: What are the Rules of Hooks, and why do they exist?#

Q6: How does useEffect work, and what is the purpose of the Cleanup function?#

Q7: What is a "Stale Closure" in React Hooks, and how do you fix it?#

Q8: What is the difference between useMemo and useCallback, and when should you avoid them?#

Q9: What is the difference between useRef and useState?#

Part 3: Component Lifecycle & Rendering#

Q10: What triggers a component to re-render in React?#

Q11: How does the Context API work, and what is the "re-render all consumers" problem?#

Q12: What is "Prop Drilling", and what are 3 clean ways to avoid it?#

Q13: How does React.memo work, and why does passing inline functions or objects break it?#

Part 4: Performance, Data Fetching & Side Effects#

Q14: How should you fetch data in modern React (useEffect vs. TanStack Query)?#

Q15: What are Error Boundaries in React, and what errors do they NOT catch?#

Q16: What is Code Splitting and how do React.lazy and <Suspense> work?#

Q17: What is the difference between useEffect and useLayoutEffect?#

Part 5: Architecture & Modern React#

Q18: What are Custom Hooks, and how do you build one?#

Q19: What is the difference between React Server Components (RSC) and Client Components?#

Q20: What is Automatic Batching in modern React (React 18 & 19)?#

Explore All DeepFrontend Curriculum Topics#

⚛️ 1. Complete React Curriculum (All 20 Topics)#

React Fundamentals

Hooks in Depth

Advanced React & Production Patterns

🌐 2. Frameworks & State Management#

Next.js & Fullstack

Modern State Management

⚡ 3. Frontend Performance & Core Web Vitals#

📚 4. All 25 DeepFrontend Learning Hubs#

Final Interview Advice#

Quick Navigation

Part 1: Core Fundamentals & JSX

Q1: What is the Virtual DOM, and how does React's Reconciliation process work?

Q2: What is the fundamental difference between State and Props in React?

Q3: Why do list items require a `key` prop, and why is using an array index dangerous?

Q4: What is the difference between Controlled and Uncontrolled Components?

Part 2: Hooks & State Management

Q5: What are the Rules of Hooks, and why do they exist?

Q6: How does `useEffect` work, and what is the purpose of the Cleanup function?

Q7: What is a "Stale Closure" in React Hooks, and how do you fix it?

Q8: What is the difference between `useMemo` and `useCallback`, and when should you avoid them?

Q9: What is the difference between `useRef` and `useState`?

Part 3: Component Lifecycle & Rendering

Q10: What triggers a component to re-render in React?

Q11: How does the Context API work, and what is the "re-render all consumers" problem?

Q12: What is "Prop Drilling", and what are 3 clean ways to avoid it?

Q13: How does `React.memo` work, and why does passing inline functions or objects break it?

Part 4: Performance, Data Fetching & Side Effects

Q14: How should you fetch data in modern React (`useEffect` vs. TanStack Query)?

Q15: What are Error Boundaries in React, and what errors do they NOT catch?

Q16: What is Code Splitting and how do `React.lazy` and `<Suspense>` work?

Q17: What is the difference between `useEffect` and `useLayoutEffect`?

Part 5: Architecture & Modern React

Q18: What are Custom Hooks, and how do you build one?

Q19: What is the difference between React Server Components (RSC) and Client Components?

Q20: What is Automatic Batching in modern React (React 18 & 19)?

Explore All DeepFrontend Curriculum Topics

⚛️ 1. Complete React Curriculum (All 20 Topics)

🌐 2. Frameworks & State Management

⚡ 3. Frontend Performance & Core Web Vitals

📚 4. All 25 DeepFrontend Learning Hubs

Final Interview Advice