React.js Interview Questions: Beginner to Advanced

A practical collection of React.js questions covering fundamentals, Hooks, performance, architecture, and real-world scenarios — organized from Beginner to Advanced, with coding and scenario-based questions kept separate for easier revision. Estimated reading time: 15–25 minutes.

React.js Basics

Q: What is React, and why is it used?

> React is a JavaScript library for building user interfaces out of reusable, composable components. It’s used because it lets developers describe what the UI should look like for a given state, and lets React handle efficiently updating the actual browser DOM to match — rather than manually manipulating the DOM by hand.

Q: What are React’s core features?

> A component-based architecture, a declarative programming model, the Virtual DOM (covered in depth later), one-directional data flow via props, and — in modern React — Hooks for managing state and side effects inside function components.

Q: Is React a framework or a library?

> A library — it focuses specifically on the view layer. Routing, global state management, and other concerns are typically handled by separate, complementary libraries, unlike a full framework that bundles everything together by default.

Q: What is React DOM, and how is it different from React?

> React provides the core UI programming model — components, state, the reconciliation algorithm. React DOM is the specific package that takes React’s output and renders it to the actual browser DOM. This distinction matters because React’s core model can target other renderers too (like React Native for mobile).

Components & JSX

Q: What is JSX?

> A syntax extension letting you write HTML-like markup directly inside JavaScript, compiled down to React.createElement() calls before it reaches the browser.

Q: What is a component?

> A self-contained, reusable function that returns JSX describing a piece of UI — the fundamental building block of a React application.

Q: What’s the difference between functional and class components?

> Functional components are plain functions using Hooks for state and lifecycle behavior — the modern, standard approach. Class components use ES6 classes with lifecycle methods (componentDidMount, etc.) and are mostly found in legacy codebases today.

Q: Why do functional components with Hooks dominate modern React?

> Less boilerplate, easier logic reuse through custom Hooks, and no this binding confusion — interviewers commonly ask this to check you understand why the ecosystem shifted, not just that it did.

Props & State

Q: What are props, and what are they used for?

> Props (“properties”) are data passed into a component from its parent — read-only from the receiving component’s perspective, used to configure or supply data to a component.

Q: What is state?

> Data a component owns and manages internally, which can change over time in response to user interaction — updating state triggers a re-render.

Q: Props vs State — what’s the real difference?

> Props come from outside and are read-only; state is owned internally and mutable via its setter. A simple test: if a component receives the data from its parent, it’s a prop; if the component creates and updates it itself, it’s state.

Q: Can a child component modify the props it receives?

> No — props are read-only from the child’s perspective. If a child needs to affect the parent’s data, the parent passes down a function (often via props) that the child calls, and the parent updates its own state in response.

Q: How does data flow between a parent and child component?

> One-directionally: parent passes data down via props; a child can request a change by calling a function the parent also passed down — data itself never flows directly upward.

Hooks

Q: What is useState, and what does it return?

> A Hook that gives a function component a piece of persistent state. It returns a pair: the current value, and a setter function to update it and trigger a re-render.

Q: What is useEffect used for?

> Synchronizing a component with something outside React’s own rendering — data fetching, subscriptions, timers, manual DOM work — running after render, based on its dependency array.

Q: What does the dependency array in useEffect actually control?

> When the effect re-runs. An empty array means “run once, after the first render.” Listing specific values means “re-run whenever any of these change.” Omitting the array entirely means “run after every render.”

Q: Is useEffect required for every piece of logic?

> No — this is a common misconception. Effects exist specifically for synchronizing with external systems. A value that can be computed directly from existing props or state during render shouldn’t be pushed into useEffect and a separate state variable.

Q: What is useContext used for?

> Reading a value from the nearest matching Context Provider higher up the tree, without manually passing it down through every intermediate component as props (avoiding prop drilling).

Q: What is useRef, and how is it different from useState?

> useRef returns a mutable object that persists across renders, but updating it does not trigger a re-render — commonly used for accessing DOM elements directly, or storing a value you need to persist without causing a re-render. useState is specifically for data that, when changed, should update the UI.

Q: Does changing a ref’s value cause a re-render?

> No — this is a frequently tested misconception. Updating ref.current is silent to React's rendering system entirely; only state updates schedule a re-render.

Q: What does useMemo do?

> Caches the result of an expensive calculation between renders, recomputing only when its listed dependencies change.

Q: What does useCallback do?

> Caches a function reference between renders, useful specifically when that function is passed to a React.memo-wrapped child or into another Hook's dependency array, where a fresh reference every render would defeat memoization or cause unnecessary re-runs.

Q: useMemo vs useCallback — what’s the actual difference?

> useMemo caches a value; useCallback caches a function. In fact, useCallback(fn, deps) is functionally equivalent to useMemo(() => fn, deps) — same underlying mechanism, shaped for two different use cases.

Q: Should useMemo and useCallback always be used for performance?

> No — this is a very commonly tested misconception. They carry their own small overhead; apply them where you’ve identified a real, measured performance issue, not as a default habit on every value and function.

Q: What is a custom Hook, and why would you build one?

> A plain function (conventionally named useSomething) that itself calls other Hooks internally — used to extract and reuse stateful logic (like a useWindowWidth or useFetch Hook) across multiple components, without duplicating that logic.

Rendering & Lifecycle

Q: Does every state update immediately change the DOM?

> No — a commonly tested misconception. React schedules the re-render and updates the real DOM efficiently, often batching multiple updates together, rather than synchronously touching the DOM the instant a state setter is called.

Q: What causes a component to re-render?

> Its own state changing, its props changing, or its parent re-rendering — the third case is the most common source of unnecessary re-renders in a large app.

Q: What is the Virtual DOM?

> A lightweight, in-memory JavaScript representation of the UI, letting React compare (diff) the previous and new versions cheaply before touching the actual, expensive browser DOM.

Q: Virtual DOM vs Real DOM?

> The Real DOM is the browser’s actual, heavyweight live representation of the page. The Virtual DOM is React’s cheap, plain-object approximation used purely to calculate the minimal set of real DOM changes needed — it isn’t a replacement for the real DOM, just an optimization strategy sitting in front of it.

Q: What is reconciliation?

> The process React uses to compare the old and new Virtual DOM trees and determine the smallest set of real changes actually needed, using heuristics (matching by type and position, or by key for lists) rather than a theoretically perfect diff.

Q: What’s the difference between useEffect and useLayoutEffect?

> useEffect runs asynchronously, after the browser has painted. useLayoutEffect runs synchronously, before the browser paints — used specifically when you need to measure or mutate the DOM and want that change reflected before the user sees anything, at the cost of potentially blocking the paint.

Forms & Events

Q: How does event handling work in React?

> React wraps native browser events in its own synthetic event system, providing a consistent API across browsers. Handlers are attached via props like onClick, onChange, matching camelCase JSX conventions.

Q: What are controlled components?

> Form inputs whose value is driven entirely by React state — every keystroke updates state, and the input’s displayed value comes from that state, giving React full, single-source-of-truth control over the form’s data.

Q: What are uncontrolled components?

> Form inputs that manage their own internal state via the DOM directly, typically accessed through a ref when needed (like on form submission), rather than being synchronized with React state on every change.

Q: Controlled vs Uncontrolled — when would you choose each?

> Controlled components are the standard default — needed for validation-as-you-type, conditional rendering based on input value, or keeping multiple inputs in sync. Uncontrolled components can simplify very basic forms where you only need the value at submission time, not on every keystroke.

Q: How does conditional rendering work in React?

> Using standard JavaScript — ternaries, &&, or early returns inside the component function — to decide what JSX gets rendered based on the current props or state, rather than a special React-specific templating syntax.

Q: Why does React need a key prop when rendering a list?

> Keys give React a stable identity for each list item across renders, letting it correctly match items when the list reorders, grows, or shrinks — not just to silence a console warning, but a genuine input into how reconciliation matches old and new list items correctly.

Q: Is a key only needed to remove a React warning?

> No — a common misconception worth correcting directly. Without stable keys (or with array index used carelessly), React can misidentify which item is which across renders, causing real bugs like state or focus jumping to the wrong row.

Routing & APIs

Q: How does client-side routing work in a React app (e.g., with React Router)?

> It intercepts navigation, updating the URL and rendered components without a full page reload — matching the current URL against defined routes and rendering the corresponding component tree.

Q: How do you fetch data in a React component?

> Typically inside a useEffect, calling fetch or a library like Axios, storing the result in state via useState, so the component re-renders once the data arrives.

useEffect(() => {
  fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(data => setUser(data));
}, [id]);

Q: How do you handle loading and error states for an API call?

> Track them as additional state variables (loading, error), set appropriately at each stage of the request, and conditionally render UI based on their current value.

State Management & Context API

Q: What is prop drilling, and why is it a problem?

> Passing a prop through several intermediate components that don’t use it themselves, purely so it reaches a deeply nested component — it clutters components with irrelevant props and makes refactoring fragile.

Q: What is the Context API used for?

> Sharing data across a component tree without manually threading it through every intermediate component as props — well suited to genuinely global, infrequently-changing data like authentication state or theme.

Q: State vs Context — when do you reach for each?

> Local useState fits data used by one component or its close children. Context fits data needed broadly across unrelated parts of the tree, and changed relatively infrequently — not a replacement for local state in general.

Q: Does Context replace the need for a dedicated state management library?

> Not universally — a common misconception. Context is useful for specific shared-data needs, but every consumer of a Context re-renders when its value changes, which can become a real performance concern for large, frequently-changing shared state.

Performance Optimization

Q: What does React.memo do?

> Wraps a component so React skips re-rendering it if its props haven’t actually changed (via shallow comparison), even if its parent just re-rendered.

Q: React.memo vs useMemo — what’s the distinction?

> React.memo memoizes an entire component, skipping its re-render. useMemo memoizes a value computed within a render that still happens — different granularity, solving related but distinct problems.

Q: When does React.memo not help, or even hurt?

> On cheap, simple components, the props-comparison cost can outweigh just re-rendering. It also does nothing useful if the component receives new object/array/function references on every render — since those always fail the shallow comparison, regardless of their actual contents.

Q: What causes unnecessary re-renders in a React app?

> Most commonly: a parent re-rendering and dragging unrelated children along with it by default, and new object/array/function references being created on every render, defeating memoization further down the tree.

Q: What is code splitting, and why does it matter for performance?

> Breaking a JavaScript bundle into smaller chunks loaded on demand, rather than one large bundle loaded upfront — reducing the amount of JavaScript a user has to download before the app becomes interactive.

Q: What is React.lazy, and how does it relate to Suspense?

> React.lazy lets you import a component lazily, only when it's actually needed. Suspense lets you declare a fallback (like a loading spinner) shown while that lazily-loaded component is still being fetched.

Advanced Concepts

Q: What is a Higher-Order Component (HOC)?

> A function that takes a component and returns a new, enhanced component — a pattern for reusing component logic, largely predating Hooks, though still encountered in some codebases and libraries.

Q: What are render props?

> A pattern where a component takes a function as a prop, which it calls to determine what to render — another pre-Hooks pattern for sharing logic between components, now often replaced by custom Hooks.

Q: What are Portals used for?

> Rendering a component’s output into a different part of the actual DOM tree than its logical position in the React component tree — commonly used for modals, tooltips, or dropdowns that need to escape a parent’s overflow or z-index constraints.

Q: What is Suspense, beyond lazy-loaded components?

> A mechanism for declaratively handling “this part of the tree isn’t ready yet” — originally for code splitting, and increasingly relevant for data fetching patterns in modern React as well.

React Architecture and Organization

Q: How would you typically organize a mid-sized React application’s folder structure?

> Common approaches group by feature (all files for one feature together) or by type (all components, all hooks, all utils, in separate top-level folders) — feature-based organization tends to scale better as an app grows, since related files stay close together.

Q: How do you decide where a piece of state should live?

> As close as possible to where it’s used, lifted up only as far as its lowest common ancestor that actually needs it — not defaulted to global state “just in case.”

Practical Examples (Used to Frame Discussion Questions)

• Todo Application — demonstrates components, state, event handling, list rendering with keys, and controlled form inputs
• E-commerce Product Page — demonstrates props, state, API-driven data, routing between pages, and component composition
• Dashboard Application — demonstrates API calls, Context for shared data, reusable components, and performance considerations at scale
• Search/Filter Application — demonstrates controlled inputs, state management as filters change, re-render behavior, and optimization opportunities

Interviewers frequently frame questions around scenarios like these directly — expect to be asked to reason through one of them out loud, not just define terms in isolation.

Coding / Problem-Solving Questions

Q: Write a counter component using useState.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Q: Fix this code — why doesn’t the counter update correctly when clicked rapidly?

// Problematic: uses stale `count` from the render's closure
const increment = () => setCount(count + 1);

// Fixed: uses the functional update form, always working off the latest state
const increment = () => setCount(prev => prev + 1);

Q: Write a custom Hook that tracks whether the window is above a given width.

function useIsWide(minWidth = 768) {
  const [isWide, setIsWide] = useState(window.innerWidth >= minWidth);

  useEffect(() => {
    const handleResize = () => setIsWide(window.innerWidth >= minWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [minWidth]);

  return isWide;
}

Q: Given a list of items, render it correctly with keys, and explain your key choice.

{items.map(item => (
  <li key={item.id}>{item.name}</li> // stable id, not array index
))}

Scenario-Based Questions

Q: A component re-renders every time its parent updates, even though its own props never change. How would you fix it?

> Wrap the component in React.memo. If it's still re-rendering, check whether it's receiving new object/array/function references as props each time — those need useMemo/useCallback on the parent side to actually stay stable.

Q: You need to share the logged-in user’s data across many unrelated components. How would you approach it?

> Use Context for the shared identity — assuming it doesn’t change frequently. If performance becomes an issue as more consumers are added, consider splitting the Context into smaller, more focused pieces to limit unnecessary re-renders.

Q: A search input feels laggy as the user types, because it triggers an API call on every keystroke. How would you address it?

> Debounce the input — only firing the actual API call after the user pauses typing for a short interval, rather than on every single keystroke.

Q: Your app’s initial bundle is large and slows down first load. What would you consider?

> Code splitting with React.lazy and Suspense, loading routes or heavy components on demand rather than all upfront, and auditing for unnecessarily large dependencies.

Common Mistakes and Misconceptions

• Props can be directly modified by a child — false; props are read-only from the receiving component’s side
• Every state update immediately changes the DOM — false; React schedules and batches updates efficiently
• useEffect is required for every piece of logic — false; it’s specifically for synchronizing with external systems
• useMemo and useCallback should always be used for performance — false; apply them where they provide a measurable benefit
• key is only needed to remove a warning — false; keys are a real input into correct reconciliation
• Changing a useRef value causes a re-render — false; ref updates are invisible to React’s rendering system
• Context automatically replaces every state-management solution — false; it fits specific shared-data needs, not everything
• React and React DOM are the same thing — false; React provides the UI model, React DOM handles browser rendering

Production Relevance

React applications in production are commonly structured around reusable components, consuming dynamic data from APIs, with routing managing navigation between views. State-management patterns (local state, Context, or a dedicated library) handle shared application data at whatever scale the app actually needs. Code splitting and lazy loading help keep production bundles lean, and performance techniques (memoization, avoiding unnecessary re-renders) become genuinely important as component trees grow. Beyond the component code itself, production React applications also need proper error handling, monitoring, and deployment practices — the same production-mindedness covered throughout this series’s backend-focused articles applies just as much on the frontend.

Quick Revision Checklist

Before a React interview, make sure you can confidently explain:

• [ ] Props vs State, and why props are read-only
• [ ] What each core Hook does: useState, useEffect, useContext, useRef, useMemo, useCallback
• [ ] Why and when a component re-renders
• [ ] Virtual DOM and reconciliation, at a conceptual level
• [ ] Controlled vs Uncontrolled components
• [ ] useMemo vs useCallback vs React.memo
• [ ] useEffect vs useLayoutEffect
• [ ] Why keys matter for list rendering
• [ ] Context API — what it’s for, and its limits
• [ ] Code splitting, React.lazy, and Suspense
• [ ] Be ready to reason through at least one scenario-based performance or architecture question out loud

Final Takeaway

React interviews tend to reward genuine understanding over memorized definitions — the difference between reciting “useEffect handles side effects” and being able to explain why a specific dependency array choice avoids a bug, or why a component keeps re-rendering unnecessarily. Fundamentals (props, state, JSX, components) build the foundation; Hooks, rendering behavior, and performance are where most modern interviews spend real time; and advanced concepts (HOCs, Portals, Suspense) show up mostly as depth-checks once the fundamentals are solid. Walking through this guide’s comparisons and scenario questions out loud, in your own words, is a far better use of prep time than memorizing definitions verbatim — that’s genuinely what interviewers are listening for.

Frequently Asked Questions

How should I prioritize my prep time with limited days before an interview?

> Prioritize Props/State, Hooks (especially useState, useEffect, and the memoization Hooks), and rendering behavior first — these come up in nearly every React interview. Advanced patterns (HOCs, render props, Portals) are worth a lighter pass unless the role specifically calls for deep React expertise.

Do I need to memorize class component lifecycle methods for modern interviews?

> Increasingly less critical, but still worth knowing at a conceptual level (mounting, updating, unmounting) since some codebases and some interviewers still reference them, and understanding how they map to useEffect shows genuine depth.

Are coding questions in React interviews usually about algorithms or React-specific patterns?

> Typically React-specific — building a small component, fixing a bug involving stale state or incorrect dependencies, or writing a custom Hook — rather than generic algorithm questions, which are more common in separate data-structures-focused rounds.

What’s the best way to practice scenario-based questions?

> Take a real feature you’ve built (or one of the practical examples in this guide) and practice explaining your component and state design decisions out loud, including tradeoffs you considered — that’s a very close simulation of how these questions actually get asked.

React.js Interview Questions: Beginner to Advanced was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.