More in React & Next.js — page 6
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.
When can overusing useMemo hurt performance and what are the trade-offs?
WHAT IT TESTS: Awareness that useMemo has memory and comparison overhead. ANSWER OUTLINE: Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking. RED FLAG: Claiming useMemo is free or automatically blocks child re-renders.
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.
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.
Explain the difference between React.memo and useMemo
WHAT IT TESTS: whether you distinguish component-level memo from value caching. ANSWER OUTLINE: React.memo skips re-renders when props match; useMemo caches a computed value between renders. RED FLAG: saying they are interchangeable or both stop re-renders.
Design a multi-step wizard form pattern in React
WHAT IT TESTS: 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.
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.
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.
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 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.
Prefer multiple useState or useReducer for multi-field forms?
WHAT IT TESTS: Matching state structure to complexity. OUTLINE: Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic. RED FLAG: Picking one pattern for all forms without discussing coupling.
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.
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 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 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.
Compare Pages Router and App Router file-based routing conventions and capabilities
Tests your grasp of the folder-as-route paradigm shift. A strong answer notes that Pages files are routes while app folders are segments requiring page.js, and cites layout.js, loading.js, and error.js as nested primitives.
How do you create a dynamic route like /products/:productId in React Router?
Tests React Router v6 dynamic segments and useParams. A strong answer declares path="products/:productId" on a Route, then extracts productId with useParams in the component. Red flag: using v5 props.match.params or manual URL parsing instead of the hook.
Implement a protected /dashboard route in React Router
Tests declarative route guards versus imperative redirects in React Router 7. Strong answer: reusable ProtectedRoute wrapper with Navigate replace, auth state above Routes, and role checks.
Why use Link over <a> for internal navigation?
This tests client-side routing vs full page reloads. A strong answer covers click interception, History API URL updates, and route prefetching. A red flag is claiming Link is purely stylistic or identical to a plain anchor.
Primary roles of BrowserRouter, Routes, and Route, and basic route setup
Tests v6 routing hierarchy. BrowserRouter provides history; Routes picks one match; Route maps path to element. Wrap Routes in BrowserRouter with nested Route elements for / and /about. Red flag: omitting the router or confusing Routes with Switch.