Interview Prep Guide

React Interview Questions and Answers for Freshers to Experienced Developers

Prepare for React interviews with structured beginner, medium, advanced, and coding questions plus answer direction and common mistakes.

Basic React Interview Questions

  1. What is React and why is it used?

    React is a JavaScript library for building user interfaces from reusable components. It is used because it makes UI updates predictable and helps teams manage complex front-end applications.

  2. What is JSX?

    JSX is a syntax extension that lets developers write HTML-like markup inside JavaScript. It is converted into React element calls during build time.

  3. What is a component in React?

    A component is a reusable unit of UI that receives inputs and returns the React elements that should appear on screen.

  4. What is the Virtual DOM and how does it work?

    The Virtual DOM is a lightweight copy of the real DOM that React keeps in memory. When state changes, React updates the Virtual DOM first, compares it with the previous version (diffing), and then batch-updates only the changed parts in the real DOM.

  5. What are Fragments in React?

    Fragments let you group a list of children without adding extra nodes to the DOM, which is useful for keeping the HTML structure clean and avoiding CSS layout issues.

Medium React Interview Questions

  1. What is the difference between props and state?

    Props are inputs passed into a component, while state is data managed by the component itself or by a shared state owner.

  2. What does useEffect do?

    useEffect runs side effects after render, such as API calls, subscriptions, timers, or syncing with browser APIs.

  3. What is a controlled component in React?

    A controlled component is a form element whose value is driven by React state and updated through change handlers.

  4. What are custom hooks in React?

    Custom hooks are JavaScript functions whose names start with "use" and that can call other hooks, allowing you to extract and reuse component logic across different parts of your app.

  5. What is the difference between useMemo and useCallback?

    useMemo returns a memoized value, while useCallback returns a memoized function reference. Both are used to prevent unnecessary re-computations or re-renders of children.

Advanced React Interview Questions

  1. Why do unnecessary re-renders happen in React?

    Unnecessary re-renders happen when parents re-render, when prop references keep changing, or when state updates are broader than they need to be.

  2. How would you choose between Context, local state, and a state library?

    Use local state for component-specific behavior, Context for shared low-frequency state, and a state library when updates, caching, or coordination become too complex for Context alone.

  3. What are refs in React and when should you use them?

    Refs let you access a DOM node or keep a mutable value without causing re-renders, which is useful for focus, measurements, and imperative integrations.

  4. What are Portals in React and when are they used?

    Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, common for modals, tooltips, and overflow-breaking UI.

  5. What are Error Boundaries and how do they work?

    Error boundaries are special components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole app.

Scenario-Based React Interview Questions

  1. How would you debug a React screen that feels slow after adding filters, charts, and shared state to the page?

    First identify whether the slowdown comes from repeated renders, expensive calculations, large DOM output, or unnecessary network updates, then narrow the fix instead of adding memoization everywhere.

React Coding Round

  1. Build a searchable, filterable list component

    Expect to receive a list of objects and a search box requirement. The clean solution keeps the source data unchanged, stores the search term in state, and derives the visible list from the term. Better candidates also handle empty results and avoid unnecessary derived state duplication.

  2. Build a Counter with Custom Step and Reset

    This tests the absolute basics. A good answer uses functional updates setCount(prev => prev + step) to avoid stale closure issues and handles the step input as a number rather than a string.

  3. Build a searchable list view with filters, loading states, and predictable re-render behavior

    Interviewers usually want a solution that feels production-ready, not a giant component with everything inline. Strong answers separate filter state, avoid unnecessary recomputation, and explain why derived values are recalculated where they are.