How to implement optimistic UI with the App Router?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
Use client components for local state and immediately update UI optimistically, then call a server action or route handler to persist. On success, revalidate server data; on failure, rollback local state.
// client component
const [items, setItems] = useState(serverItems);
function add(item) {
setItems((prev) => [item, ...prev]); // optimistic
fetch("/api/add", { method: "POST", body: JSON.stringify(item) })
.then(() => router.refresh())
.catch(() => setItems((prev) => prev.filter((i) => i.id !== item.id)));
}
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.