5 exercises — choose the best-structured answer to common React / Next.js Developer interview questions. Focus on precise vocabulary, correct use of technical terms, and demonstrating real experience.
Structure for React / Next.js interview answers
Name the mechanism: shallow comparison, linked-list hook order, RSC zero-JS rendering — not just the API name
Give the decision axis: data change frequency, personalisation need, server vs. client state
State the trade-off honestly: every tool choice has a cost — name it
Name the anti-pattern you avoid: shows you've seen it go wrong in practice
0 / 5 completed
1 / 5
The interviewer asks: "What causes a React component to re-render, and how do you prevent unnecessary re-renders?" Which answer best explains React's rendering model?
Option B is strongest: it lists all four re-render triggers precisely including the commonly underestimated parent-re-render-regardless-of-prop-change case, explains React.memo's actual mechanism (shallow comparison), explains *why* memo often fails in practice (new references from inline literals) and the specific fix (useCallback/useMemo pairing), and names the separate context re-render trap with two concrete mitigation strategies. Key structure: four triggers, including underestimated parent case → memo mechanism (shallow comparison) → why memo often fails (reference instability) → memo+useCallback/useMemo pairing → context trap → mitigation strategies. Option C is accurate but doesn't explain the reference-instability failure mode that makes memo ineffective in practice. Option D is misleading — dismissing re-render cost as a non-concern ignores real cases (expensive computation, large lists, unnecessary effect triggers) where it matters.
2 / 5
The interviewer asks: "What are the rules of hooks, and why do they exist?" Which answer best explains the underlying mechanism?
Option B is strongest: it explains the actual internal mechanism (linked list of hook state matched by call order), explains precisely what breaks and why when order changes (wrong state matched to wrong hook, hard-to-trace corruption), correctly distinguishes what the ESLint rule catches from the deeper mechanism, and clarifies the common point of confusion — that conditional logic must move inside the hook rather than around the hook call. Key structure: linked-list-by-call-order mechanism → what breaks and why when order changes → ESLint rule vs. underlying mechanism → conditional logic inside the hook, not around it → custom hooks inherit the same constraint. Option C states the rule correctly and mentions custom hooks but doesn't explain the underlying linked-list mechanism or why it causes corruption specifically. Option D is vague — it doesn't explain the mechanism at all, just restates the rule as a directive.
3 / 5
The interviewer asks: "How do you decide between the App Router and the Pages Router in Next.js, and what changes with Server Components?" Which answer best demonstrates modern Next.js architecture judgment?
Option B is strongest: it explains the actual mechanism of Server Components (zero client JS, direct backend resource access without an API layer), correctly frames the default-inversion (Client Components as the explicit exception now, not the default), names the concrete architectural cost (explicit server/client boundary reasoning, library compatibility, Suspense streaming understanding), and gives specific, reasoned exceptions for staying on the Pages Router rather than a blanket rule. Key structure: App Router default reasoning (investment + RSC) → RSC mechanism (zero JS, direct backend access) → default inversion for Client Components → real architectural trade-offs → specific, reasoned exceptions for Pages Router. Option C is accurate and covers the mechanism well but is thinner on the trade-offs and exceptions. Option D gives a shallow justification ("Vercel recommends it") without technical reasoning, which is a weak signal in a technical interview.
4 / 5
The interviewer asks: "When would you use SSR, SSG, or ISR in Next.js, and how do you decide?" Which answer best demonstrates rendering-strategy judgment?
Option B is strongest: it names the actual decision axis (data change frequency vs. personalisation need) rather than just defining the three strategies, explains the underlying mechanism and cost model of each (CDN edge serving vs. per-request compute vs. background regeneration), gives concrete example use cases for each, and closes with an explicit default-and-escalate decision rule (default SSG → ISR when needed → SSR only when personalisation is a hard requirement) with the cost reasoning behind it. Key structure: decision axis named explicitly → mechanism and cost model per strategy → concrete use case examples → default-and-escalate decision rule with cost reasoning. Option C defines the three strategies correctly but doesn't give the underlying decision axis or a clear default rule. Option D is a poor strategy — defaulting to SSR "for everything" ignores the real cost and performance trade-offs the question is specifically testing for.
5 / 5
The interviewer asks: "How do you choose between Redux Toolkit, Zustand, Jotai, and React Query for state management?" Which answer best demonstrates state-management architecture judgment?
Option B is strongest: it leads with the fundamental architectural split (server vs. client state) and explains *why* they need different tools (different lifecycles: caching/staleness/refetching vs. UI state), explains specifically what React Query does better and why, gives concrete decision criteria for each client-state library tied to actual state shape and team context (not just complexity level), and names the specific anti-pattern it's actively avoiding (server data in global client store) with a clear statement of why that's the most common mistake. Key structure: server vs. client state as the first split, with reasoning → why React Query specifically wins for server state → decision criteria per client-state library tied to state shape and context → explicit anti-pattern named and avoided. Option C makes the same server/client split correctly but without the deeper reasoning for each choice or the explicit anti-pattern warning. Option D avoids giving any real decision framework, which under-answers a question specifically asking for judgment.
What does "React / Next.js Developer Interview Questions — Best-Answer Practice" cover?
Practice answering React / Next.js Developer interview questions in professional English. 5 exercises covering re-renders, rules of hooks, App Router vs Pages Router, rendering strategies, and state management.
How many questions are in this interview set?
This set has 5 exercises, each with a full explanation.
Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is free to use with no account, sign-up, or paywall.
Do these exercises include model answers?
Yes. Each interview question gives you several possible responses and asks you to pick the one that communicates most clearly and completely — the explanation then breaks down exactly why that answer works, including the specific vocabulary a strong candidate would use.
What if I choose an answer that isn't the strongest one?
You'll see which option was correct and read a full explanation of why it's stronger than the alternatives, plus the key vocabulary and phrasing worth reusing in a real interview.
Can I retry the questions?
Yes — use the "Try again" button on the results screen to reset and go through the set again.
Is this the same as a real technical or behavioural interview?
No — it's focused practice for the language side of interviewing: recognising which phrasing sounds precise and confident versus vague, and knowing the vocabulary interviewers expect for this role. It won't replace mock interviews, but it builds the vocabulary you'll need in one.
Where can I find interview prep for other roles?
Browse the full Interview exercises hub for 170+ modules covering behavioural, technical, and system design rounds across dozens of IT roles, or check the "Next up" link below to continue.
Do I need an account, and is my progress saved?
No account is needed. Progress is tracked only for your current visit — reloading or leaving the page resets the counter.
Who writes these interview questions?
Every question is written by the CoderSlingo team based on real technical interview patterns for this role, then reviewed for accuracy and clarity.