Hooks
How do useState and useEffect work?
useState adds local state to a function component and returns the value plus a setter. useEffect runs side effects after render and re-runs whenever a value in its dependency array changes; an empty array means 'run once on mount'.
What are the rules of hooks?
Call hooks only at the top level of a component or custom hook - never inside loops, conditions or nested functions - so React can reliably match each hook call across renders.
useMemo vs useCallback?
useMemo memoises a computed value; useCallback memoises a function's identity. Use them to skip expensive recomputation or to stop passing a fresh function to a memoised child on every render.
What is a custom hook?
A function whose name starts with 'use' that composes built-in hooks to share stateful logic between components - for example a useFetch hook that encapsulates loading, data and error state.
Core model
State vs props?
Props are read-only inputs passed from a parent; state is local, mutable data owned by the component and updated via its setter. Never mutate state directly - always set a new value so React re-renders.
What is the virtual DOM and reconciliation?
The virtual DOM is a lightweight in-memory representation of the UI. On each update React diffs the new tree against the previous one (reconciliation) and applies only the minimal real-DOM changes.
Why do lists need stable keys?
Keys let React match list items across renders. Stable, unique keys preserve state and DOM correctly; using the array index breaks on reordering or insertion and can attach the wrong state to the wrong item.
Controlled vs uncontrolled components?
A controlled input derives its value from state and updates via onChange; an uncontrolled input keeps its own state in the DOM, read via a ref. Controlled is preferred for validation and predictable data flow.
Performance
What causes unnecessary re-renders and how do you prevent them?
A component re-renders when its state or props change, or its parent re-renders. Prevent waste with React.memo for pure components, useCallback/useMemo to stabilise props, and by keeping state as local as possible.
What is the Context API good for, and its downside?
Context shares values (theme, auth) without prop-drilling. The downside: every consumer re-renders when the context value changes, so split contexts or memoise the value to limit re-renders.
Practice this now