Extract Duplicated Logic After Third Occurrence

Why this matters

The "Rule of Three" is a pragmatic guideline: tolerate duplication twice, extract on the third occurrence. This balances two competing risks:

• Too early extraction — abstracting after the first duplication often produces the wrong abstraction because you don't yet understand the full pattern
• Too late extraction — letting duplication grow past 3 copies makes it increasingly likely that copies will diverge, creating subtle bugs

The rule

When the same logic appears in 3 or more places, extract it to the appropriate layer:

• Same component logic → custom hook or utility function
• Same API pattern → shared service function
• Same data transformation → shared mapper/formatter
• Same validation → shared validation schema

Bad example

// In user-profile.tsx
function formatUserName(user: User) {
  return user.name
    ? `${user.name} (@${user.username})`
    : `@${user.username}`;
}
 
// In comment-card.tsx — same logic, copy #2
function formatAuthor(author: User) {
  return author.name
    ? `${author.name} (@${author.username})`
    : `@${author.username}`;
}
 
// In team-member-list.tsx — same logic, copy #3
function getMemberDisplay(member: User) {
  return member.name
    ? `${member.name} (@${member.username})`
    : `@${member.username}`;
}

Three copies with different function names but identical logic. When the format needs to change (e.g., adding verified badges), you must find and update all three.

Good example

// lib/utils/format-user.ts — single source of truth
export function formatUserDisplayName(user: { name?: string; username: string }) {
  return user.name
    ? `${user.name} (@${user.username})`
    : `@${user.username}`;
}

// All three components import the shared function
import { formatUserDisplayName } from "@/lib/utils/format-user";
 
// user-profile.tsx
<span>{formatUserDisplayName(user)}</span>
 
// comment-card.tsx
<span>{formatUserDisplayName(comment.author)}</span>
 
// team-member-list.tsx
<span>{formatUserDisplayName(member)}</span>

Where to extract

The extraction target depends on what the duplicated code does:

How to detect

Duplication detection is best done during code review. Look for:

• Functions with different names but similar structure
• Copy-pasted blocks with minor variable name changes
• Similar try/catch patterns across multiple files
• Repeated conditional chains with the same shape

Automated tools like jscpd can detect copy-paste patterns:

npx jscpd --min-lines 5 --min-tokens 50 src/

When NOT to extract

• Only 2 copies exist — wait for the third to understand the pattern
• The logic is coincidentally similar — same structure but different domain meaning
• The abstraction would be more complex than the duplication — sometimes 3 simple copies are clearer than 1 generic function with 5 parameters

References

• Rule of Three (computer programming)
• Martin Fowler: Refactoring
• The Wrong Abstraction — Sandi Metz