React quiz — 75 questions with answers and explanations

Answer: C

Virtual DOM is an in-memory representation of the real DOM. When state changes, React creates a new Virtual DOM tree, diffs it against the old one to compute the minimal set of changes, then applies them to the real DOM (reconciliation). The goal is to reduce expensive DOM operations, not to always be faster than direct DOM manipulation.

Answer: C

Props are data passed from parent to child component, read-only — the receiving component cannot modify them. State is internal data managed by the component itself, changed via a setter, and each update triggers a re-render. Quick memory aid: props are like function parameters, state like a component's local variables.

Answer: B

Using the index as key is a problem when the list can add/remove/reorder items: deleting the first element shifts the indexes of the following elements, so React mismatches items between renders, causing local state (input being typed, checkbox, focus) to attach to the wrong row. Use a stable ID from the data instead, e.g. todo.id.

Answer: D

Lifting state up means moving state to the nearest common parent when multiple components need to share the same data. The parent holds the state as the single source of truth, passes it down via props, and the children update it via callbacks. Do it when two siblings get out of sync; if you have to lift through too many levels, consider Context or a state manager.

Answer: A

JSX (JavaScript XML) is a JavaScript syntax extension that lets you write HTML-like markup directly in JS code. React uses JSX because it describes the UI visually and lets you keep logic and markup together in one component. Browsers don't understand JSX — Babel or SWC transpiles it into element-creating function calls (React.createElement / _jsx) before it runs.

Answer: B

useState takes an initial value and returns an array [current value, setter function]. Calling the setter schedules a re-render with the new value — the count variable in the current render does not change in place. The initial value is only used on the first mount; later renders return the stored state. Assigning directly to a plain variable does not update the UI.

Answer: D

Conditional rendering in React uses ordinary JavaScript expressions: the ternary cond ? <A /> : <B /> to choose between two branches; logical AND cond && <A /> to show or hide a component; if/else or switch placed outside the return for complex logic, assigning the result to a variable and embedding it in JSX. React has no v-if-style directive.

Answer: A

JSX braces only accept expressions — code that returns a value. A for loop is a statement and returns nothing, so it causes a syntax error inside JSX. items.map(item => <li key={item.id}>...</li>) is an expression returning an array of elements, so it can be embedded directly. You can still use for outside JSX: build the array first, then embed the variable.

Answer: B

The bug is onClick={handleClick()}: the parentheses () make the function run immediately at render, and its return value (undefined) is what gets assigned to onClick — so clicking the button does nothing. The correct way is to pass a function reference: onClick={handleClick}. To pass arguments, wrap it in an arrow function: onClick={() => handleClick(id)}.

Answer: A, B, C

React Fragment (<React.Fragment> or the shorthand <>) groups multiple sibling elements without adding an extra DOM node. Use it when a component must return several parallel elements, especially in strict HTML contexts like multiple <td> inside<tr>, or multiple <tr> inside <tbody> — where a wrapping div breaks the structure. Note: the shorthand <>...</> syntax does not accept a key; rendering a list of Fragments requires the full form.

Answer: B

props.children is the special prop holding the content nested between a component's opening and closing tags. For example, in <Card><p>Hi</p></Card>, inside Card the {children} is exactly <p>Hi</p>. This is the foundation of composition: building wrapper components (Modal, Layout, Card) that decide the outer shell without needing to know the inner content ahead of time.

Answer: C

It displays the number "0". Because 0 is falsy, the expression count && ... short-circuits and returns 0 — and React renders numbers as text, unlike null, undefined, true, false, which are skipped entirely. Fix: make sure the left side of && is a real boolean — count > 0 && <span>...</span> or !!count && <span>...</span>.

Answer: D

Because JSX uses capitalization to distinguish: lowercase compiles into an HTML tag name string, while uppercase is treated as a reference to a variable holding a component. Naming a component in lowercase produces a nonexistent HTML tag and renders nothing.

Answer: A

Keyboard users can't use it: a div isn't focusable via Tab and doesn't respond to Enter or Space. Screen readers also don't announce it as a button. With a mouse everything seems fine, so the bug slips through easily.

Answer: D

Nothing. All the extra checks — double-invoking functions that should be pure, running effect setup and cleanup twice, warnings about legacy APIs — exist only in development and are stripped entirely from the production build.

Answer: A

React doesn't store hook names; it identifies hooks by their call order in each render. Calling them conditionally changes that order between renders, so one hook's value gets assigned to another — mixed-up data with no clear error.

Answer: C

Because React uses the DOM property name className instead of the HTML attribute class. In JSX, React maps className to the class attribute in the DOM.

Answer: A

Assign the default value directly when destructuring the prop in the parameter list. This is plain JavaScript syntax, so it applies when the prop is not passed or is undefined.

Answer: D

Create a new object copying the old fields, then overwrite the field you want to change. React compares references to detect state changes, and unlike other libraries, the update function here replaces the whole object instead of merging.

Answer: A

Create a render root on an element of the page, then render the component tree into it. Everything React manages lives inside that element, so the rest of the page is unaffected.

Answer: D

This is a controlled component: the value prop binds the displayed value to React state, and onChange is the only way to update it — state is the source of truth. Uncontrolled is the opposite: the DOM holds the value itself, and React only reads it via ref when needed (typically with defaultValue).

Answer: D

The result is 1. The event handler captures a closure — count is frozen at the value 0 of the current render, so all three calls compute 0 + 1; React batches them into a single re-render with the value 1. To accumulate, use a functional updater: setCount(prev => prev + 1) three times gives 3.

Answer: D

Three cases: no array passed — the effect runs after every render; empty array [] — runs only after mount (cleanup on unmount); array with values [a, b] — re-runs when a or b changes, compared with Object.is. React does not analyze the code inside the effect, so the ESLint rule exhaustive-deps helps catch missing dependencies.

Answer: A

Missing cleanup: the effect must return () => clearInterval(id). Without it, when the component unmounts the interval keeps running — a memory leak and setState on an unmounted component. Cleanup runs before the effect re-runs and on unmount; every effect that creates a timer, subscription, or event listener needs corresponding cleanup.

Answer: C

useCallback memoizes the function itself — keeping a stable reference across renders; useMemo calls the function and memoizes the returned result. Identity: useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). Use useCallback when passing a callback to a child wrapped in React.memo or when the function is a dependency of useEffect; useMemo for expensive computations.

Answer: B, C, D

useRef returns an object { current } that persists across every render. Two main uses: (1) accessing a DOM element for imperative work (focus, measuring size); (2) storing a mutable value that survives renders without triggering a re-render when it changes. Unlike setState: changing ref.current does not trigger a render, and you should not read/write a ref during render.

Answer: B

A custom hook is a function whose name starts with "use" that can call other hooks (useState, useEffect...) to encapsulate and reuse stateful logic across components. Key point: hooks share logic, not state — each component that calls the hook gets its own independent state instance.

Answer: A, C, E

Three sources of re-render: (1) the component's own state changes; (2) the parent re-renders — by default this cascades to all children regardless of props; (3) a context it reads changes value. Changing ref.current or a variable outside the component does not cause a re-render because React does not track them. React.memo only blocks source (2).

Answer: B

Choose useReducer when the state has several related sub-values and many kinds of update actions: it centralizes state-transition logic into one pure reducer that is easy to test, and the component only dispatches actions. useState fits simple, independent values. Note: useReducer is not faster than useState, and its state is still local — it is not a global store.

Answer: B

lazy(() => import(...)) makes the bundler split HeavyChart into its own chunk — the JavaScript is downloaded only when HeavyChart first renders. While the chunk is loading, the component "suspends" and the nearest Suspense shows the fallback. Result: a smaller initial bundle and faster main-page load. Chunk load failures are not handled by Suspense — you need to wrap it in an Error Boundary.

Answer: C

React.memo compares props shallowly by reference (Object.is). The inline object literal style={{ padding: 16 }} is a NEW object on every Page render, so memo always sees "props changed" and re-renders UserCard. Fix: hoist the static object into a constant outside the component, or use useMemo if it depends on state. General rule: inline object/array/function props defeat React.memo.

Answer: B

It violates the "only call hooks at the top level" rule: the early return before useState makes the hook conditional. React stores state by hook CALL ORDER, not by name — when user changes from null to a value, the next render has more hooks than the previous one, and React throws "Rendered more hooks than during the previous render". Fix: place all hooks above the early return.

Answer: A

useContext returns the default value passed to createContext(default) when there is no ancestor Provider — this is normal behavior, not an error. So the default should be a usable value, or you wrap it in a custom hook that throws a clear error when the context is undefined (a common pattern to catch a "forgot the Provider" bug early). useContext always reads the NEAREST Provider above it in the React tree.

Answer: B

This is an uncontrolled component: the DOM holds the value itself and React reads it through the ref on submit. defaultValue only sets the initial value (unlike value — value locks the input to state and requires onChange too; without onChange the input becomes read-only). Choose uncontrolled when you do not need to react to every keystroke: less code, no re-render while typing. Pick controlled only when you need real-time validation/formatting/disabling of a button.

Answer: D

Anti-pattern: storing a value derived from props in state via an effect. Consequences: every time props change, the component renders with the old fullName, then the effect calls setState → a second (redundant, briefly stale) render. Fix: compute it during render — const fullName = firstName + " " + lastName (use useMemo if it is expensive). Initializing useState from props is also wrong: the initializer only runs on mount, so later prop changes are not reflected.

Answer: A

When the new value is computed from the old one. The count variable in the current render scope is a fixed snapshot, so calling setCount(count + 1) three times in a row only increments by one. The functional form receives the latest value in the update queue, so it accumulates correctly.

Answer: D

Because React compares old and new state by reference. The push method mutates the array in place, so the reference doesn't change; React sees the identical value and skips re-rendering. The correct way is to create a new array: setItems([...items, x]).

Answer: D

At two moments: before each re-run of the effect (when a dependency changes), and when the component unmounts. That way every setup always has a matching teardown, so event listeners or timers don't stack up.

Answer: A

Because the effect holds the closure of the render that created it. A variable used inside but omitted from the dependency array stays frozen at that render's value, so the effect works with stale data with nothing to warn you.

Answer: A

A race condition: the request for the first user may resolve after the request for the second user and overwrite the correct data with stale data. The UI shows the wrong user with no error thrown.

Answer: B

Because the component body must be pure: React may call it multiple times, twice in a row in strict mode, and in concurrent mode it can be interrupted and re-run. Putting a network call there causes uncontrolled duplicate requests, and often an infinite loop when the result is assigned to state.

Answer: B

Virtualization: render only the rows currently visible in the viewport plus a small buffer, and replace the rest with blank space of matching height. The cost shifts from scaling with ten thousand rows to scaling with the few dozen visible ones.

Answer: D

Each time the parent renders, a new component function is created. React compares by reference and treats it as a different component type, so it unmounts the entire subtree and remounts it — state is cleared, effects re-run, and inputs lose focus.

Answer: D

With React 18's new root API (createRoot), React automatically batches updates inside promises, timers, and native browser callbacks too, instead of mainly batching only inside React event handlers as before. Legacy ReactDOM.render does not have the same behavior.

Answer: C

When the list is never reordered, never has items added or removed in the middle, and the items have no individual state. In other words, a static list rendered only once. Outside that case, the index is a source of state being attached to the wrong element.

Answer: B

It is a wrapper around the native event that normalizes properties and behavior across browsers. React attaches a listener at the root of the app tree and dispatches to the corresponding component itself, instead of attaching a listener to each element.

Answer: B

The input becomes effectively read-only: the user types but the value does not change because it is always reset to the state, and nothing updates the state. React warns in the console and suggests adding a change handler or using the default value property.

Answer: B

Passing data deep down the tree without threading a prop through every intermediate level. It solves exactly the prop-drilling problem — not state management, and it does not help reduce the number of renders.

Answer: B

When many distant branches of the tree read and write the same frequently changing state. Lifting that state to the root makes the whole tree re-render, while context wakes up every consumer. A library with per-slice subscription mechanisms solves exactly this.

Answer: B

The effect re-runs on every render. React compares each element of the dependency array by reference, and an object created inside the component body is a new reference every time — so React always concludes the dependency changed.

Answer: B

The function form is only called on the first render. The other form evaluates the expression on every render and then discards the result, since state is initialized only once. With an expensive initializer, that difference matters a lot.

Answer: A

Use the full form <Fragment key={item.id}> and import Fragment from React. The shorthand <> accepts no attributes at all, including a key — that's its only limitation compared to the full form.

Answer: B

Invert ownership: the root component builds the JSX and passes it down as children. Intermediate components only position that content without needing to know what props it takes — so no prop is forwarded at all.

Answer: A

Because the test then binds to what real users actually see and interact with, not to DOM structure or CSS class names. Restructuring internals doesn't fail the test as long as the user-facing interface is unchanged.

Answer: B

findBy returns a promise and retries until the element appears or the timeout expires. getBy queries immediately and throws if it isn't found. Use the waiting form when content appears after an asynchronous task such as loading data.

Answer: A

htmlFor, pointing to the input's id. JSX renames it because for is a JavaScript keyword. This association lets screen readers announce the correct label when the input is focused, and lets users click the label to focus the field.

Answer: D

Because every value inserted into JSX is escaped before reaching the DOM. A string containing a script tag renders as literal text rather than being executed by the browser. The only escape hatch is the raw-HTML insertion attribute, and its name is deliberately verbose as a reminder.

Answer: D

An infinite loop. With no dependency array the effect runs after every render; the effect updates state, the state update triggers a render, and the re-render runs the effect again. React will stop and report that the maximum update depth was exceeded.

Answer: A

The initial bundle contains only the code for the page being viewed instead of the whole app. In an app with twenty screens, a user landing on the login page doesn't have to download the admin page's code. Other pages' code loads when you navigate to them.

Answer: C

In the closest common component to all the places that actually need it — no higher. Placing it higher than needed re-renders the whole branch and forces intermediate layers to pass props through; placing it lower leaves the interested parties unable to stay in sync.

Answer: D

Render a component into a different DOM node, usually the body, while keeping its position in the React tree. Used for dialogs, tooltips and dropdown menus — things that ancestor CSS like overflow: hidden or stacking order would break.

Answer: C

A single state object holding every field, plus one shared handler that reads the field name from the element and updates the matching key. This avoids ten state variables and ten nearly identical handlers.

Answer: B

Syncing with a system outside React: registering events, timers, WebSocket connections, manual DOM manipulation, or subscribing to an external store. Other needs — derived values, responding to actions, resetting state — have more suitable approaches.

Answer: B

The index received in the map is the index after filtering, not the position in the original array. Using that index to delete or update the original array hits the wrong element. Operate on the item's identity instead of its index.

Answer: D

Map over the array to build a new copy, replacing the target item with a modified copy and keeping the other items unchanged. Copying the array and mutating an item inside it is not enough, because a shallow copy still shares the same item objects.

Answer: C

When there are many fields, complex validation rules, and dependent fields. With a few simple inputs, handling it yourself is shorter; a library only pays off once the amount of repetitive code becomes significant.

Answer: A

Shared caching, de-duplication of requests, background refetching, and stale data management. Writing it yourself with effects means every component starts from scratch and shares nothing, so the same data is fetched several times on one screen.

Answer: B

Delay the call until the user stops typing for a short interval, usually around three hundred milliseconds. Only the final keyword is sent, so the number of calls drops sharply while results still appear nearly instantly.

Answer: C

Use a type that describes everything renderable. It includes elements, strings, numbers, arrays, and empty values — exactly what can be placed between a component's tags.

Answer: A

The value is embedded directly into the downloaded bundle, so anyone can read it with browser tools. The public prefix is itself a declaration that the value is no longer a secret.

Answer: B

Not sufficient. Checking in the browser only decides what is displayed, while users can still call the API directly with any tool. Every endpoint must check authorization itself — a UI guard is only experience, not security.

Answer: B

Intercept at the network layer with a fake server during the test. The component's code is left untouched so the test checks real behavior, and the same mocks can be reused for both integration tests and development.

Answer: D

It can be called in conditional branches and inside loops, unlike the rule for every other hook. The reason is that it does not hold state by call order, so the positional constraint is no longer necessary.

Answer: A

React automatically manages the pending state and resets the form on completion, while also blocking the default behavior. You don't write state for submission, and the form still submits before the script has finished loading.

Answer: B

A short, contextual message with an in-place retry button. Users know which part failed and can recover without reloading the whole page or losing existing state.