interview.practice
React JS: Beginner to Advanced interview questions
Answer aloud before opening each explanation. Focus on the reasoning, not memorized wording.
0/16 saved answers | 16 questions shown
01What causes a React component to render?RenderingBeginner
Model answer
Its initial mount, a state update, a parent render, or a consumed context update.
Why
React calls the component to calculate the next UI, then commits only necessary DOM changes.
02Why should state be treated as immutable?StateBeginner
Model answer
React relies on new references to detect and schedule changes predictably.
Why
Mutating existing objects can hide changes and makes previous render snapshots unreliable.
setUser(current => ({ ...current, name: 'Ada' }));03Why are stable keys important?ListsBeginner
Model answer
They preserve item identity between renders.
Why
Keys help React match previous and next children, preserving the correct state and minimizing DOM work.
04When should useEffect be used?EffectsIntermediate
Model answer
To synchronize with an external system after rendering.
Why
Data derivation and event-specific work usually belong in render logic or event handlers, not Effects.
05What are the Rules of Hooks?HooksIntermediate
Model answer
Call Hooks only at the top level and only from React components or custom Hooks.
Why
Stable call order lets React associate each Hook call with its stored state.
06When are useMemo and useCallback useful?PerformanceAdvanced
Model answer
When measured work or referential stability matters.
Why
They are optimization tools, not semantic guarantees; unnecessary memoization adds complexity.
07How do controlled and uncontrolled inputs differ?ArchitectureAdvanced
Model answer
Controlled inputs use React state; uncontrolled inputs keep their current value in the DOM.
Why
Controlled inputs provide direct validation and coordination, while uncontrolled inputs can reduce wiring for simple forms.
08What is reconciliation?RenderingAdvanced
Model answer
React's process for comparing render trees and deciding what to commit.
Why
Element type, position, and keys influence whether React preserves or replaces component state.
09Why should a clickable action usually be a button?AccessibilityBeginner
Model answer
A button already supports keyboard interaction and has the correct accessible role.
Why
React event handlers should enhance semantic HTML instead of replacing it with generic elements.
<button onClick={save}>Save</button>10Why should inputs have labels instead of only placeholders?FormsBeginner
Model answer
Labels provide a persistent, reliable accessible name.
Why
Placeholders disappear as users type and are not a complete replacement for a form label.
11What states should a data-fetching UI usually show?Async UIBeginner
Model answer
Loading, success, empty, and error states.
Why
Each state tells the user what is happening instead of leaving them with a blank or broken-looking screen.
12Why do some effects return a cleanup function?EffectsIntermediate
Model answer
To undo subscriptions, timers, or external work before the effect reruns or the component unmounts.
Why
Cleanup prevents stale listeners, duplicate timers, and memory leaks.
React.useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); }, []);13When should useRef be used?RefsIntermediate
Model answer
For mutable values or DOM references that should not trigger a render when changed.
Why
Refs are useful for focus, measuring elements, timers, and storing instance-like values.
14When is useReducer clearer than useState?ReducersIntermediate
Model answer
When several related state transitions are easier to describe as actions.
Why
Reducers centralize transition rules, which helps with forms, editors, carts, and quiz flows.
15What makes a component API easy to use?ArchitectureAdvanced
Model answer
Small, purposeful props with clear names and predictable behavior.
Why
A component with too many unrelated props becomes hard to learn, test, and maintain.
16How should you debug a React UI that does not update?DebuggingAdvanced
Model answer
Check whether the event runs, state changes, props are correct, and console errors exist.
Why
A step-by-step checklist finds the broken assumption faster than rewriting the component.