React Interview Questions

What React interviews cover

Sample React interview questions

• What problem do React hooks solve, and what are the rules of hooks?
  What a strong answer covers

  • Enables state and lifecycle in functional components
  • Promotes logic reuse via custom hooks
  • Simplifies code vs class components
  • Rules: top-level call only, only in React functions
  • Avoids conditional or loop calls

  View a sample answer

  React hooks solve several problems: they allow functional components to manage local state and side effects without converting to class components, they enable reuse of stateful logic through custom hooks (replacing mixins and HOCs), and they simplify component code by grouping related logic together. Hooks also avoid the complexity of this binding in class components. The rules of hooks are: (1) Only call hooks at the top level of a React function (not inside loops, conditions, or nested functions) to ensure the order of hook calls is consistent across renders. (2) Only call hooks from React function components or custom hooks. Violating these rules can lead to bugs like stale state or incorrect hook associations, and eslint-plugin-react-hooks helps enforce them.

• Explain the difference between useMemo and useCallback, and when each is worth using.
  What a strong answer covers

  • Both memoize values/functions to avoid recalc
  • useMemo returns the result of a function
  • useCallback returns a memoized function reference
  • useMemo for expensive computations
  • useCallback to stabilize function props passed to children

  View a sample answer

  useMemo and useCallback are both React hooks that memoize values to avoid unnecessary recalculations on re-renders. useMemo takes a function and a dependency array, and returns the result of that function only when dependencies change. useCallback takes a function and a dependency array, and returns a memoized version of that function (same reference) unless dependencies change. Use useMemo when you have an expensive computation (e.g., filtering large arrays, complex math) that you don't want to re-run on every render. Use useCallback when you pass a callback function to a child component wrapped in React.memo, to prevent that child from re-rendering due to a new function reference. A common pitfall is overusing these hooks; they have their own cost (memory, comparison), so only apply them when you can measure a performance benefit. For example, if a function is trivial, inline it without useCallback.

• What causes a component to re-render, and how do you prevent unnecessary re-renders?
  What a strong answer covers

  • State change, props change, context change
  • Parent component re-render triggers child re-render
  • useState, useReducer, useSyncExternalStore
  • Prevent: React.memo, useMemo, useCallback, key stability
  • Avoid inline objects/functions in render

  View a sample answer

  A React component re-renders when: its state changes (via useState or useReducer), its props change (compared by reference if not memoized), its context value changes, or its parent re-renders (by default all children re-render). To prevent unnecessary re-renders, use React.memo on components to shallow-compare props—if props haven't changed, the component skips rendering. Inside the component, use useMemo to memoize expensive values and useCallback to stabilize callback references. Avoid creating new objects, arrays, or functions inline in JSX (e.g., <Child onClick={() => ...} /> creates a new function each render), as that breaks React.memo's comparison. Additionally, keep state as close as possible to where it's needed (state colocation) to avoid re-rendering distant components. Measuring with React DevTools Profiler helps identify actual bottlenecks.

• How does the key prop work in lists, and why does it matter?
  What a strong answer covers

  • Helps React identify which items changed/added/removed
  • Used in reconciliation algorithm
  • Stable keys minimize DOM re-creation
  • Index as key causes bugs with unstable lists
  • Unique, string/number keys per sibling

  View a sample answer

  The key prop helps React's reconciliation algorithm identify individual elements in a list during updates. When a list re-renders, React uses keys to match previous items with new ones, deciding which DOM nodes to reuse, reorder, or destroy. Using stable, unique keys (like database IDs) allows React to efficiently update only changed items and preserve local state (e.g., input focus). Using array indices as keys is discouraged when the list order can change (e.g., sorting, filtering), because React may reuse DOM nodes incorrectly, causing state bugs like tangled inputs or wrong animations. It is acceptable only for static lists that never change order. Keys should be unique among siblings and stable across renders; using Math.random() as key defeats performance.

• Build a debounced search input with a custom hook.
  What a strong answer covers

  • Custom useDebounce hook
  • Uses useState and useEffect with timer
  • Returns debounced value after delay
  • Cleans up timer on each change
  • Time complexity O(1) per keystroke

  View a sample answer

  Below is a custom hook that debounces a value, commonly used for search inputs to avoid firing API calls on every keystroke. It stores a debounced version that updates only after a specified delay of inactivity.

  import { useState, useEffect } from 'react';
  
  function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);
  
    useEffect(() => {
      const timer = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
  
      // Cleanup the timer if value or delay changes before timeout
      return () => clearTimeout(timer);
    }, [value, delay]);
  
    return debouncedValue;
  }
  
  export default useDebounce;

• When would you use Context vs a state library like Redux or React Query?
  What a strong answer covers

  • Context for low-frequency, global state (theme, locale)
  • Redux for complex state logic and middleware
  • React Query for server state caching and async
  • Context causes tree re-renders on value change
  • Redux: predictable, devtools, but boilerplate

  View a sample answer

  Use React Context when you have low-frequency, global state like theme, locale, or user preferences that don't change often, and the tree of consumers is relatively small. Context is simple but causes all consumers to re-render when the value changes, so it's not ideal for high-frequency updates. Use Redux (or Zustand, Jotai) when you have complex state logic, multiple pieces of state that change together, or need middleware for side effects (e.g., Redux Saga). Redux gives a predictable state container with powerful DevTools for debugging, but adds boilerplate. Use React Query (or SWR, Apollo) for managing server state (data fetching, caching, background refetching). These libraries handle caching, stale-while-revalidate, and reduce the need to manually store fetched data in global state. In short: Context for truly global, rarely-updated state; Redux for complex client-side state; React Query for server state.

How to prepare

• Be able to reason about renders out loud — interviewers care more about your mental model than memorized APIs.
• Practice small live-coding tasks (a counter, a debounced input, a fetch-and-list) until they're automatic.
• Know the trade-offs of each state tool rather than defaulting to one.
• Mention performance tools (React DevTools Profiler) when discussing optimization.

Frequently asked questions