Concepts in React & Next.js, page 7
React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
React's SyntheticEvent: One Wrapper for All Browsers
React's SyntheticEvent is a browser-agnostic wrapper around native events, ensuring your onClick handlers behave identically everywhere. The main footgun: event objects are pooled for performance, so you can't access their properties in an async callback.
React Error Boundaries: Containing UI Crashes
An Error Boundary is like a try...catch block for React components, preventing a single UI crash from breaking your whole app. Use it to wrap components that might fail, showing a fallback UI instead of a white screen.
React's Concurrent Rendering: Interruptible UI Updates
Concurrent Rendering lets React pause and resume rendering, so a large update won't freeze the UI. It's like a chef pausing a big task to handle a quick order, ensuring the app stays responsive. This is key for features like Suspense.
React Render Bailouts: Skipping Unnecessary Work
React's Performance Hooks let you 'bail out' of unnecessary re-renders by caching results. React reuses the cached output unless specific dependencies change, saving computation on expensive components.
React Fiber: Making UI Rendering Interruptible
React Fiber treats rendering like a cooperative scheduler. It breaks UI updates into small, pausable chunks, preventing long, blocking tasks. This lets high-priority work like user input interrupt heavy rendering, keeping animations and gestures smooth.
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.
React's Current & Work-in-Progress Trees
React uses a double-buffering technique for non-blocking updates. The current tree is what's on screen; the workInProgress tree is built in the background on state changes. The footgun is confusing this low-level mechanism with the 'virtual DOM'.
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 Internal Scheduler Package
React's scheduler is an internal traffic cop that breaks up rendering work to keep the UI from freezing. It's used to prioritize updates and yield to the browser, but its public API is unstable and not for direct use in your app.
The <Route> Component: Mapping URLs to UI
The <Route> component is like a switch statement for your UI, telling your app 'when the URL is X, render component Y'. It's used to define pages like /dashboard or /users/:id. The footgun is forgetting it must live inside a <Routes> component.
useParams: Accessing Dynamic URL Segments
The useParams hook lets client components read dynamic URL segments. On a route like /posts/[slug], it returns an object like { slug: 'my-post' }. Remember, it's for client components only and won't see query strings.
useNavigate: Programmatic Navigation in React
The useNavigate hook gives you a function to change routes from your component's logic, like after a form submission. Use it for event-driven navigation, such as sending a user to their dashboard after login.
The useSearchParams Hook for URL Queries
The useSearchParams hook gives your client component read-only access to the URL's query string. Use it to build UIs that react to URL changes, like filtering a list or displaying search results.
React Router Data Loaders: Fetch Before You Render
React Router loaders fetch data *before* a component renders, eliminating loading spinners inside your UI. Use them to load data for a new route in parallel with its code. The footgun: forgetting that loaders must run in both server and browser environments.
Yup: Schema Builder for Runtime Validation
Yup is a validation pipeline: schemas parse, coerce, and assert untrusted data in one pass. Use it for API payloads or forms while TypeScript infers types automatically.
Memoizing Selectors: Avoid Needless Re-renders
Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.
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 Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Rules of Hooks: Call Order Is Sacred
Hook calls must keep the same order every render because React maps them to state by array index. Only call hooks at the top level of React functions. Break the order and React desyncs, producing stale state or crashes.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles