When would you choose useLayoutEffect over useEffect?
WHAT IT TESTS: React commit phase and paint timing. ANSWER OUTLINE: Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. RED FLAG: Using it for data fetching or ignoring its blocking cost.
Why pass a function to useState for expensive initial values?
This tests your understanding of React's render-phase behavior. Without the function, expensive work reruns on every render and is thrown away; the initializer runs once only during mount.
What is the purpose of the useEffect cleanup function?
WHAT IT TESTS: Your grasp of useEffect teardown before re-runs and unmount. ANSWER OUTLINE: Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.
How do you fetch data with useEffect and prevent memory leaks?
This tests useEffect async lifecycle and cleanup. A good answer places fetch inside useEffect, uses an ignore flag or AbortController to block state updates after unmount, and includes deps. A red flag is skipping cleanup and letting a late response set state.
What will count be after three setCount calls in a row?
Tests React state batching and stale closures. Answer: count is 1 because all three calls read the same closed-over value of 0. Fix: pass an updater function setCount(c => c + 1) three times so React queues each update.
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
How do you use useState to track user input?
WHAT IT TESTS: Whether you know useState basics for controlled inputs. ANSWER OUTLINE: Initialize with useState at top level, bind input value to state, and update via onChange using setter. RED FLAG: Calling useState conditionally or mutating state directly.
Can you pass a React component as a prop? Explain Render Props.
Tests React composition. Yes, functions and JSX are valid prop values. Strong answers explain inversion of control, contrast with children, and cite dynamic layouts. Red flag: conflating render props with HOCs or saying props only accept primitives.
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
Write the React.createElement() equivalent for this JSX
Tests JSX-to-JS compilation mechanics. Answer: createElement('a', {href: '/home', className: 'link'}, 'Go Home'). Children must be the third argument, not inside props. Red flag: nesting children in props or using an unquoted tag variable.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
Describe two patterns for conditional rendering in JSX
WHAT IT TESTS: Whether you know React conditional rendering. ANSWER OUTLINE: First, early return with if/else for branches; second, ternary or logical AND inside JSX for inline toggles. RED FLAG: Reaching for useState or useEffect when simple JS suffices.
What is the purpose of React's key prop and index key risks?
This tests React reconciliation. Keys give stable identity to match components across renders and preserve state. Indices break on reorder or delete, causing state bugs. A red flag: saying keys are only for performance or indices are harmless.
Explain props in React and how parent components pass data to children
WHAT IT TESTS: Your grasp of props as the read-only, one-way parent-to-child interface. ANSWER OUTLINE: Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
How should you adapt animations for prefers-reduced-motion?
WHAT IT TESTS: Vestibular accessibility and media ergonomics. ANSWER OUTLINE: Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible. RED FLAG: Ignoring the setting or using JS instead of CSS media features.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
CSS will-change: purpose, appropriate use, and overuse consequences
Tests whether you know will-change is a last-resort hint, not a default. Strong answers: hint imminent changes, toggle via script, and warn that overuse wastes memory. Red flag: leaving it in CSS permanently or applying it preemptively to many elements.
Create a staggered list fade-in using only CSS
Tests CSS animation orchestration via keyframes and delay strategies. Great answers use :nth-child or --index variables for scalable staggering, set fill-mode forwards, and honor prefers-reduced-motion.
Why is animating transform preferred over top or margin-left?
WHAT IT TESTS: grasp of the rendering pipeline and frame rate. A strong answer says transform skips layout and runs on the compositor, while top and margin-left force layout and drop frames. RED FLAG: claiming both are equally fast or that only syntax differs.
How do you trigger a CSS transition? Provide two methods.
WHAT IT TESTS: That you know a transition needs a property change to fire, not just a declaration. ANSWER OUTLINE: Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.