React &amp; Next.js

Explain Shallow Routing in Next.js Pages Router

This tests URL updates without re-running getServerSideProps or getStaticProps in the Pages Router. A strong answer defines shallow: true, cites query-state UI like filters or modals, and notes same-page and App Router limits.

How do you handle 404s in React Router and Next.js App Router?

Tests client versus server routing architecture. React Router uses a wildcard route returning HTTP 200 by default; Next.js App Router uses not-found.js for server-rendered 404s. Red flag: confusing the two routers or ignoring status code semantics.

Explain controlled vs uncontrolled React form inputs and trade-offs

Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.

How do you handle a basic form submission in React?

Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.

Prefer multiple useState or useReducer for multi-field forms?

Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic.

How would you implement real-time client-side validation in React?

Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.

Advantages of dedicated React form libraries over manual state

Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.

How do you use a Server Action for form submission and useFormState?

Tests server-client form state orchestration. Outline: write a Server Action that validates and returns errors; pass it to useFormState for state; wire to form action and use useFormStatus for pending UI.

Optimize a large form with frequent state updates

Tests render propagation and memoization discipline. Strong answers note parent updates re-render children, extract inputs to localize state, useMemo for derived values, and stable callbacks. Red flag: useMemo everywhere without component boundaries.

Design a multi-step wizard form pattern in React

Shared state, step validation, and resilient navigation. A great answer uses one form instance with per-step Zod schemas, a context stepper, and localStorage persistence. Red flag: isolated forms per step that lose data on navigation.

Explain the difference between React.memo and useMemo

React.memo skips re-renders when props match; useMemo caches a computed value between renders.

Child re-renders with unchanged props: function identity and useCallback fix

This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.

How would you use React Profiler to find unnecessary re-renders?

This tests the Profiler for wasted renders. A good answer covers wrapping a subtree in Profiler, comparing actualDuration to baseDuration on updates, and checking for missing memoization. Red flag: mentioning only the browser extension without timing metrics.

When can overusing useMemo hurt performance and what are the trade-offs?

Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking.

How do React.lazy and dynamic import() enable code splitting?

It tests your grasp of React code-splitting and the Suspense contract. A strong answer states that lazy defers loading until first render via dynamic import, and Suspense shows a fallback while the Promise resolves.

How does Next.js routing auto-implement code splitting?

Tests route-based code splitting versus manual setup. Strong answers note each page/route becomes its own chunk automatically, while client-only apps need explicit React.lazy and Suspense.

React Profiler long render duration: causes and next steps?

Tests interpreting actualDuration vs baseDuration. Outline: close values on updates mean broken memoization—add memo or useMemo; high baseDuration alone means an inherently slow subtree. Red flag: proposing fixes before comparing these two Profiler metrics.

How would you avoid new functions per list item without useCallback?

Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.

Explain list virtualization and when it beats React.memo

This tests whether you know React.memo skips re-renders but leaves off-screen nodes in the DOM. A strong answer describes virtualization mounting only visible items to cut memory use. A red flag is claiming memoization fixes jank or saves memory for big lists.