Intermediate concepts in React & Next.js, page 4
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.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
BEM: Self-Documenting CSS Class Names
BEM turns classes into a mini filesystem: Block__Element--Modifier. It prevents CSS collisions in large React codebases where many teams share a global stylesheet. The footgun is turning every nested tag into an element and creating comically long names.
BrowserRouter: Real URLs in React SPAs
BrowserRouter turns the address bar into a client-side navigation system, using real URLs without reloads. It is the default choice for SPAs that need shareable links.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.
Accessible React Forms: Labels, Focus, and Errors
Accessible React forms need real labels, keyboard focus, and error announcements, not just ARIA. Screen reader users must perceive inputs and validation without visual cues. The common footgun is placeholder text or divs instead of label elements with htmlFor.
Zustand Middleware: Intercept Every Set Call
Zustand middleware intercepts set calls to add logging, persistence, or devtools without touching business logic. Use it when updates need the same side effect, like localStorage sync.
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