More in Frontend Dev — page 21
Next.js 16.2 adds agent-native dev tooling
Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.
Next.js 16.2 ships stable Adapter API for all platforms
Next.js 16.2 ships a stable Adapter API co-built with OpenNext, Netlify, and Cloudflare. The typed build contract lets any platform target full framework fidelity using the same public hooks Vercel uses. Stop reverse-engineering build output.
How do you manage database connections in serverless Next.js API routes?
This tests serverless concurrency and connection limits. A strong answer notes lambda scaling exhausts DB connections, advocates connection pooling or serverless drivers, and caches the client globally.
What drives your choice between Zustand and Redux Toolkit at scale?
What it tests: matching state philosophy to constraints, not hype. Outline: weigh Zustand's minimal footprint against Redux Toolkit's DevTools and structured async patterns. Red flag: claiming one is always better regardless of team size or debugging needs.
How do you ensure a complex form is fully accessible?
WHAT IT TESTS: Mastery of semantic HTML, focus control, and ARIA for validation. ANSWER OUTLINE: Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby.
What is the Virtual DOM and why does React use it?
This tests reconciliation as declarative abstraction, not raw speed. Good answers define VDOM as in-memory UI synced to the real DOM, explain declarative state mapping, and note fibers enable incremental rendering.
Explain the difference between Server and Client Components in Next.js
WHAT IT TESTS: your understanding of rendering boundaries in the Next.js App Router. ANSWER OUTLINE: server components run on the server with no client JS and access backends directly; client components ship JS and handle state.
How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
How do React Profiler flame and ranked charts pinpoint bottlenecks?
WHAT IT TESTS: Distinguishing flame chart subtree cost from ranked chart self-time. ANSWER OUTLINE: Flame chart width and color show duration with children; ranked chart sorts by self-time to surface the top component. RED FLAG: Calling them identical.
How do React Router v6.4 loaders change data fetching from useEffect?
This tests moving from fetch-on-render to render-as-you-fetch. Explain that loaders fire before render, removing useEffect waterfalls, while the router ignores stale promises on interruption. Red flag: calling loaders just useEffect outside the component.
Is Tailwind maintainable at scale, and what patterns support your claim?
Tests your CSS architecture judgment with utility-first scaling patterns. Strong answers pick a side, citing three patterns: strict tailwind config, components hiding class soup, and sparing @apply.
Purpose of tailwind.config.js content array and JIT scanning
Tests knowledge of Tailwind's scan-to-generate pipeline. Strong answer: content defines files to scan as plain text for class tokens; JIT emits CSS only for discovered classes, keeping production CSS tiny. Red flag: calling it AST parsing or PurgeCSS config.
Compare CSS Modules and runtime CSS-in-JS libraries across DX, performance, and dynamic styling
This tests build-time vs runtime style architecture trade-offs. A strong answer contrasts CSS Modules' static extraction with CSS-in-JS's prop-driven runtime injection, covers dynamic styling patterns, and weighs SSR and bundle costs.
What limits React inline styles and when are they still appropriate?
This tests React styling trade-offs. Outline: no pseudo-classes, media queries, or keyframes; maintenance and perf costs; good for dynamic state styling, prototyping, FOUC prevention, and small components. Red flag: claiming they are always bad or free.
How would you implement a custom useDebounce hook using useState and useEffect?
It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.
How does React's scheduler prioritize updates with Fiber?
Tests cooperative scheduling. Cover Fiber's incremental units, the Scheduler's time-slicing loop, and Lanes where SyncLane and InputContinuousLane outrank DefaultLane. Red flag: claiming React uses a separate thread or that batching alone handles priority.
What is a Fiber in React Fiber architecture?
Tests reconciler internals. Strong answers define a Fiber as a unit of work with child, sibling, return, and alternate pointers; explain the linked-list tree enables incremental traversal; and note alternate connects current and work-in-progress trees.
How does React batch multiple setState calls in one event handler?
Tests your grasp of React batching and stale closures. React queues updates until the handler exits, so multiple literal setState calls with the same stale value update once, while updater functions queue sequentially.
Why is Fiber's render phase interruptible but commit is not?
WHAT IT TESTS: Knowledge that Fiber's render phase computes the workInProgress tree while commit applies side-effects. ANSWER OUTLINE: Render calculates changes on invisible tree; commit runs DOM mutations and lifecycles synchronously.
Why did React replace the Stack Reconciler with Fiber?
Tests React scheduling limits. Good answers note the old reconciler was synchronous and recursive, blocking the main thread, while Fiber enables incremental rendering and interruptible work. Red flag: citing Hooks or vague speed claims without frame budgets.