A focused set of React interview questions with concise, correct answers, covering components, hooks, state management, rendering behavior, and performance. Useful for interview prep or screening candidates.
What is React? A JavaScript library for building user interfaces from composable, declarative components. It uses a virtual DOM to compute minimal real-DOM updates.
What is JSX?
A syntax extension that lets you write HTML-like markup in JavaScript. It compiles to React.createElement() calls. Browsers don't run it directly, a build step (Babel/Vite/Next) transpiles it.
What is the virtual DOM? An in-memory representation of the UI. On state change, React builds a new virtual tree, diffs it against the previous one (reconciliation), and applies only the changed nodes to the real DOM.
Function vs class components?
Function components are the modern default, simpler, with hooks for state and lifecycle. Class components use this.state, this.setState, and lifecycle methods; still supported but no longer recommended for new code.
What are hooks? Functions that let function components use state and other React features. Rules: only call them at the top level (not in loops/conditions) and only from React functions.
useState, how does it work?
Returns a [value, setter] pair. Calling the setter schedules a re-render. Updates are batched; use the functional form when the new value depends on the old:
setCount(prev => prev + 1);useEffect, when does it run?
After render. The dependency array controls when: [] runs once on mount; [a, b] runs when a or b change; omitted runs after every render. Return a cleanup function to undo side effects (subscriptions, timers).
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id); // cleanup on unmount
}, []);useMemo vs useCallback?
useMemo caches a computed value; useCallback caches a function reference. Both prevent unnecessary recomputation/re-creation across renders when dependencies are unchanged.
What is useRef for?
A mutable container (.current) that persists across renders without causing re-renders, used for DOM references and storing mutable values like timers.
What is useContext?
Reads a context value without prop drilling. Pair with createContext and a <Provider>.
What is "lifting state up"? Moving shared state to the closest common ancestor so multiple children stay in sync via props.
Props vs state? Props are read-only inputs passed from parent to child. State is internal, mutable data owned by a component.
What are controlled vs uncontrolled components?
Controlled: form value is driven by React state (value + onChange). Uncontrolled: the DOM holds the value, read via a ref.
Why do you need key in lists?
Keys give elements a stable identity so React can match them across renders. Use stable unique IDs, not array indexes when the list can reorder.
What causes a re-render? State change, prop change, parent re-render, or context value change.
How do you prevent unnecessary re-renders?
React.memo for components, useMemo/useCallback for values/functions, proper key usage, and splitting context. Measure first with the React DevTools Profiler.
What is reconciliation? React's diffing algorithm that compares the new and old virtual DOM trees to determine the minimal set of real-DOM mutations.
What is the difference between useEffect and useLayoutEffect?
useEffect runs asynchronously after paint. useLayoutEffect runs synchronously after DOM mutations but before paint, use it when you must measure or mutate layout to avoid a visible flicker.
Why is my useEffect running twice?
In React 18 Strict Mode (dev only), effects run twice to surface missing cleanup. It does not happen in production.
Why is my state update not reflected immediately?
setState is asynchronous and batched; the new value is available on the next render, not the line after the call.
| Topic | Can they explain… |
|---|---|
| Virtual DOM | diffing + reconciliation |
| Hooks rules | top-level only, deps array |
| useEffect | timing + cleanup |
| useMemo/useCallback | value vs function caching |
| Keys | stable identity, not index |
| Performance | React.memo + Profiler |
Maintained by the team at EchoGlobal. Hiring React talent? See our curated lists of Top React JS Experts, Top JavaScript Engineers, and Top Next.js Experts on GitHub, or hire pre-vetted developers in days.