React Core Concepts
How React actually works, not just its API. JSX compilation, the component model, props, state, synthetic events, and the mental model that prevents bugs.
JSX is not HTML. It compiles to React.createElement calls that produce plain JavaScript objects — the virtual DOM. Understanding this compilation step prevents an entire class of bugs.
Components are functions that return React elements. Props are immutable inputs. Children is just another prop. Master these fundamentals and composition patterns fall into place.
useState is not a variable assignment. State updates are queued, batched, and processed asynchronously. Understanding the batching model prevents the most common React bugs.
React does not attach event listeners to individual DOM nodes. It uses event delegation at the root, wraps native events in SyntheticEvent, and has subtle differences from native DOM events that cause real bugs.
JSX conditional patterns, the key prop reconciliation algorithm, and why using array index as key causes real data corruption bugs in production.
Controlled inputs give React full authority over form state. Uncontrolled inputs let the DOM manage itself. The choice has deep implications for validation, testing, and performance.
Mount, update, unmount — the three phases of a component's life. useEffect runs after paint, not during render. Understanding this timing prevents race conditions, memory leaks, and infinite loops.
useRef creates a mutable container that persists across renders without triggering re-renders. It is React's escape hatch to the imperative DOM world — but choosing between refs and state is a critical design decision.
Context solves prop drilling but creates a re-render problem: every consumer re-renders when the context value changes. Understanding this trade-off — and when composition is the better answer — is essential.
Error boundaries catch JavaScript errors in the component tree and display fallback UI instead of crashing the entire application. They are class-only (no hooks equivalent) and essential for production resilience.
8 scenarios that test whether you truly understand React's rendering behavior. Predict which components re-render, when state updates trigger renders, and when React bails out.