Interview
React Quiz
Test your React knowledge with this comprehensive self-assessment covering hooks, rendering, state management, performance, and advanced patterns.
1. Learning Objectives
This self-assessment will test your knowledge of React framework mechanics. By the end of this quiz, you will be able to evaluate your understanding of:
- Hook dependency arrays and their effect on re-execution timing.
- React rendering lifecycle and when components actually re-render.
- State immutability requirements and their implications.
- Performance optimization APIs and their correct usage.
- Advanced patterns like portals, error boundaries, and suspense.
2. Overview
Choose the best answer for each question. Review the explanations under the solutions to check your answers and understand the concepts in detail.
3. Self-Assessment Questions
Q1: What does the empty dependency array [] in useEffect signify?
A) The effect runs on every render.
B) The effect runs once on mount and its cleanup runs on unmount.
C) The effect never runs.
D) The effect runs only when the component receives new props.
Answer: B
An empty dependency array tells React the effect has no dependencies, so it runs once after the initial render (mount). The cleanup function returned by the effect runs when the component unmounts.
Q2: Which of the following will cause a React component to re-render?
A) Calling setState with the exact same value (primitive).
B) A parent component re-rendering (child has no memo).
C) Mutating a ref's .current property.
D) Changing a local variable (not state) inside the component.
Answer: B
When a parent re-renders, all its children re-render by default (unless wrapped in React.memo). Option A does not trigger re-render because React bails out if the new state value is identical (via Object.is). Option C does not trigger re-render because refs are mutable containers outside React's render cycle. Option D is just a local variable reassignment with no effect on rendering.
Q3: What happens when you call setState twice in the same event handler?
A) The component re-renders twice, once for each call.
B) React batches both updates into a single re-render.
C) Only the second setState call takes effect.
D) React throws an error because you cannot call setState twice.
Answer: B
React 18 automatically batches all state updates within the same execution context into a single re-render, regardless of where they are called (event handlers, timeouts, promises). This optimization reduces unnecessary renders.
Q4: Why does setState(count + 1) called three times in a row only increment by 1?
A) React ignores duplicate setState calls.
B) Each call uses the same stale count value from the current render's closure.
C) JavaScript cannot process three function calls in sequence.
D) React only allows one setState per event handler.
Answer: B
All three calls reference the same count value from the current render's closure. If count is 0, all three calls compute 0 + 1 = 1. To increment correctly, use the functional updater: setState(prev => prev + 1), which always receives the latest pending state.
Q5: What is the purpose of React.lazy() and Suspense?
A) They enable server-side rendering.
B) They enable code splitting by dynamically importing components and showing a fallback while loading.
C) They replace useEffect for async operations.
D) They prevent components from ever re-rendering.
Answer: B
React.lazy() wraps a dynamic import() call, creating a component that loads its code on demand. Suspense wraps the lazy component and displays a fallback UI (like a spinner) while the component's code is being fetched. This enables route-based or component-based code splitting to reduce initial bundle size.
Q6: Which hook should you use to read a DOM element's dimensions after rendering but before the browser paints?
A) useEffect
B) useMemo
C) useLayoutEffect
D) useRef
Answer: C
useLayoutEffect fires synchronously after DOM mutations but before the browser paints. This is the correct hook for measuring DOM elements (e.g., getBoundingClientRect()) to position tooltips or popovers without a visible flicker.
Q7: What does React.createPortal() do?
A) Creates a new React application instance.
B) Renders children into a DOM node that exists outside the parent component's DOM hierarchy.
C) Creates a portal for server-side rendering.
D) Teleports props between unrelated components.
Answer: B
Portals render child elements into a different DOM node (e.g., document.getElementById('modal-root')) while preserving the React component tree hierarchy. Events still bubble through the React tree, not the DOM tree. Portals are commonly used for modals, tooltips, and dropdowns.
Q8: What is the key difference between useRef and useState?
A) useRef can only store DOM elements, useState can store any value.
B) Updating a ref's .current does not trigger a re-render; updating state does.
C) useRef is synchronous and useState is asynchronous.
D) There is no difference; they are interchangeable.
Answer: B
useRef returns a mutable object ({ current: value }) that persists across renders. Modifying .current does not cause a re-render. useState returns a value and setter; calling the setter triggers a re-render. Use refs for values you need to persist but don't need to display (timers, previous values, DOM nodes).
Q9: How does an Error Boundary catch errors in React?
A) Using a try/catch block inside a useEffect hook.
B) Using the componentDidCatch lifecycle method and getDerivedStateFromError static method in a class component.
C) Using a global window.onerror handler.
D) Using React.memo to prevent rendering errors.
Answer: B
Error Boundaries are class components that implement getDerivedStateFromError (to update state and render a fallback UI) and componentDidCatch (to log error information). They catch errors during rendering, lifecycle methods, and constructor calls of their child tree. They do not catch errors in event handlers, async code, or server-side rendering.
Q10: When should you use useReducer instead of useState?
A) When you need to store a single boolean value.
B) When state transitions are complex, involve multiple sub-values, or when the next state depends on the previous state in a structured way.
C) When you want to avoid re-renders.
D) When you need to persist state in localStorage.
Answer: B
useReducer is ideal when state logic is complex — for example, a form with many fields, a state machine with defined transitions, or when multiple state values must change together atomically. The reducer function centralizes all state transition logic, making it testable and predictable.
4. Summary & Next Steps
Review the answers to identify topics you need to revisit.
- If you missed questions about hooks, revisit the Hooks chapter.
- If you missed questions about rendering, revisit the Performance chapter.
- Next, proceed to the Cheatsheet for a quick reference guide to React APIs and patterns.