← Back to Stage 2
Stage 2#201Debugging · Senior~10 min read

Debug an effect that submits twice in Strict Mode

React + TypeScript Interview Core · React Runtime

Move user-intent side effects into event handlers, make submit idempotent, and explain why dependency-array fixes are not enough.

Prompt

Debug an effect that submits twice in Strict Mode

This is a hands-on rep. Attempt the drill before reading the model answer, then narrate the tradeoffs as if an interviewer is watching.

💡
Tip

Use a transfer form or approval flow, not an analytics toy example.

Foundation

What to ground before answering

Move user-intent side effects into event handlers, make submit idempotent, and explain why dependency-array fixes are not enough.

Focus vocabulary: React, effects, Strict Mode, idempotency.

The useful mental model is not to memorize a perfect answer. It is to explain what owns the data, what can fail, what the user sees, and what test would prove the behavior.

Coding drill

Prevent duplicate submit side effects

Target: 15mNot run

Make the behavior executable before comparing against the model answer.

type SubmitEvent = {
  operationId: string;
  source: 'click' | 'effect';
};

function shouldSubmit(previousOperationIds: string[], event: SubmitEvent): boolean {
  // TODO: only explicit user intent can submit, and operation IDs are idempotent.
  return true;
}
TypeScript · runnable
System design

Interview explanation prompt

  • What problem is this practice item really testing?
  • What state or contract boundary must be explicit?
  • What edge case would cause a production regression?
  • What would you test first?
  • How would you explain the tradeoff in two minutes?
Self-grade

Self-grade

  • Strong answer handles the edge cases before polishing syntax.
  • Strong answer explains why the chosen type or function boundary prevents bugs.
  • Weak answer passes only the happy path or hides uncertainty in booleans and nullable fields.

Model Answer

function shouldSubmit(previousOperationIds: string[], event: SubmitEvent): boolean {
  if (event.source !== 'click') return false;
  return !previousOperationIds.includes(event.operationId);
}
Review

Recall before moving on

  • What is the one-sentence answer for "Debug an effect that submits twice in Strict Mode"?
  • Which real experience from PR TIMES, React/TypeScript migration, or systems work supports it?
  • What edge case would you volunteer before the interviewer asks?
  • What is the smallest test or artifact that proves the design works?