Last updated: June 26, 2026
50 of 50 questions
React is a JavaScript library for building user interfaces with a component model and a virtual DOM that minimises expensive real DOM updates.
JSX is a syntax extension that lets you write HTML-like markup in JavaScript; a compiler transforms it into React.createElement calls.
Props are read-only inputs passed from a parent, while state is data a component owns and can change over time, triggering re-renders.
Components are reusable, self-contained UI building blocks. Function components are the modern default; class components are the older lifecycle-method style.
The Virtual DOM is an in-memory tree of UI. On update React diffs it against the previous tree (reconciliation) and patches only what changed.
Keys give list items a stable identity so React can match them across renders and update, move, or remove only the items that changed.
A controlled component derives its value from React state; an uncontrolled component keeps its own value in the DOM, read via a ref.
React attaches a single delegated listener at the root and wraps native events in a cross-browser SyntheticEvent passed to your camelCase handlers.
Use ternaries, the logical && operator, early returns, or by assigning JSX to a variable — whatever keeps the markup readable.
Fragments let a component return multiple children without adding an extra wrapper DOM node, keeping the markup clean and valid.
In function components use default parameter values when destructuring props; defaultProps still works but is being deprecated for functions.
children is a special prop holding whatever JSX you nest between a component’s tags, enabling composition and reusable wrappers.
useState returns the current state value and a setter; calling the setter schedules a re-render with the new value.
useEffect runs side effects after render — data fetching, subscriptions, timers — and its dependency array controls when it re-runs.
Data flows one way — from parent to child via props — and changes flow back up through callbacks, making state changes predictable.
Use a Fragment whenever the wrapper would add a meaningless DOM node that breaks layout, semantics, or valid HTML structure.
A default export is imported under any name; named exports must be imported with their exact name and allow multiple exports per file.
StrictMode is a dev-only wrapper that surfaces unsafe patterns and double-invokes certain functions to expose impure render and effect bugs.
Compute derived values during render from existing state or props; only store independent data in state to avoid sync bugs.
Use useReducer when state is complex, has many sub-values, or the next state depends on intricate logic best centralised in one function.
useMemo caches the result of an expensive calculation between renders, recomputing only when its dependencies change.
useCallback memoises a function reference; useMemo memoises a computed value. useCallback(fn, deps) equals useMemo(() => fn, deps).
React.memo is a HOC that skips re-rendering a component when its props are shallow-equal to the previous render.
Missing dependencies cause stale closures reading old values; extra or unstable dependencies cause effects to re-run too often or infinitely.
Lifting state up moves shared state into the closest common ancestor so multiple children can read and update it through props.
Context shares values across a component subtree without prop drilling, ideal for global-ish data like theme, locale, or the current user.
A custom hook is a function starting with "use" that composes built-in hooks to extract and reuse stateful logic across components.
Only call hooks at the top level of a React function, and only from components or other hooks — never in loops, conditions, or nested functions.
useRef stores a mutable value that persists across renders without triggering re-renders, commonly to access DOM nodes or hold instance data.
On reorder or insertion, index keys make React reuse the wrong DOM/state, causing mismatched inputs, lost focus, and incorrect animations.
Store fields in a single state object and use a generic onChange keyed by the input’s name, or move to useReducer for complex forms.
Race conditions, missing cleanup, double fetches in StrictMode, and no caching — which is why most teams use a data library like TanStack Query.
Prop drilling is passing props through many intermediate components that don’t use them; avoid it with composition, Context, or a state library.
Memoise children with React.memo and stabilise their props with useCallback/useMemo, or restructure so the changing state is more local.
Error boundaries are components that catch render-phase errors in their subtree and show a fallback UI instead of crashing the whole app.
useEffect runs asynchronously after paint; useLayoutEffect runs synchronously after DOM mutations but before paint, blocking visual update.
React shares behaviour by composing components and passing props/children, which is more flexible and explicit than class inheritance hierarchies.
Passing value={undefined} then a string flips the input from uncontrolled to controlled; React warns because it loses track of the source of truth.
React compares elements by type and key at each position; same type+key reuses and updates the instance, otherwise it unmounts and remounts.
Concurrent rendering lets React interrupt, pause, and resume rendering work so high-priority updates (like typing) stay responsive.
useTransition marks a state update as non-urgent; useDeferredValue lets a value lag behind to keep urgent updates responsive. Both reduce input jank.
Suspense lets a component "suspend" by throwing a promise; React shows the nearest fallback until it resolves, enabling declarative loading states.
Server Components render on the server, ship zero JS for themselves, and can access backend resources directly; client components hydrate and run in the browser.
State is tied to a component’s position and type in the tree; changing type or position resets it, while keeping both preserves it even across different data.
It safely subscribes a component to an external store under concurrent rendering, preventing tearing where different parts read inconsistent snapshots.
Memoisation adds memory and comparison cost, clutters code, and silently breaks when dependencies aren’t stable, often without measurable benefit.
Split contexts by update frequency, memoise the provider value, and separate state from dispatch so consumers only react to what they use.
They occur when server-rendered HTML differs from the first client render — from non-deterministic values, browser-only APIs, or invalid nesting.
Hooks share stateful logic without changing the tree; render props and HOCs wrap components, adding nesting ("wrapper hell") and indirection.
The React Compiler auto-memoises components and values at build time based on a sound analysis, reducing the need for manual useMemo/useCallback/memo.
Upload your resume and get an instant ATS score with keyword gaps — free, no sign-up.
Advanced React Interview Questions
10 questions
JavaScript Interview Questions
50 questions
Next.js Interview Questions