What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
What is prop drilling in React?
WHAT IT TESTS: Awareness of coupling when props tunnel through indifferent layers. ANSWER OUTLINE: Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext. RED FLAG: Using Context for every prop.
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.
Zustand's `create`: A Factory for Global State Hooks
Zustand's `create` function is a factory for your global state. You define your state and actions, and it returns a custom hook to access them anywhere in your app, avoiding prop drilling. The footgun: `set` shallow-merges state by default.
React State Updates: The Queue and the Updater Function
React batches state updates from one event, like a waiter taking a full order before heading to the kitchen. This prevents multiple re-renders. The footgun: `setCount(count + 1)` called three times only increments once, as `count` is fixed for that render.
React's Two-Step Update: Render and Commit
React updates the screen in two phases. The "render" phase is React calling your components to calculate the UI. The "commit" phase is when it actually updates the DOM. The footgun is thinking rendering always changes the screen; it's just the prep work.