Code Anti-Patterns and Best Practices Guide

Code Anti-Patterns and Best Practices Guide (Conceptual Edition)

This document intentionally uses masked / pseudo-code.
The goal is to explain design ideas, not provide copy-paste implementations.

---

1. Switch / If-Else Ladders

❌ Anti-Pattern

function handle(type) {
  if (type === 'A') return ResultA;
  else if (type === 'B') return ResultB;
  else if (type === 'C') return ResultC;
  // keeps growing...
  else return DefaultResult;
}

Problems

• Hard to extend
• Violates Open/Closed Principle
• Increasing cognitive load

✅ Better Pattern: Lookup Strategy

const TYPE_MAP = {
  A: ResultA,
  B: ResultB,
  C: ResultC,
};

function handle(type) {
  return TYPE_MAP[type] ?? DefaultResult;
}

---

2. Magic Numbers and Strings

❌ Anti-Pattern

if (value > 52428800) {
  throw Error('Too large');
}

✅ Better Pattern

const LIMITS = {
  MAX_SIZE: /* 50 MB */,
};

if (value > LIMITS.MAX_SIZE) {
  throw Error('Too large');
}

---

3. Code Duplication

❌ Anti-Pattern

function actionFromScreenA() {
  /* same logic */
}

function actionFromScreenB() {
  /* same logic again */
}

✅ Better Pattern

function sharedAction(input, callbacks) {
  /* common logic */
}

---

4. Redundant State

❌ Anti-Pattern

state = {
  data,
  filteredData,
  count,
  hasData,
};

✅ Better Pattern

state = {
  data,
  filter,
};

// filteredData, count derived when needed

---

5. Long Parameter Lists

❌ Anti-Pattern

createReport(a, b, c, d, e, f, g);

✅ Better Pattern

createReport({
  title,
  range,
  format,
  metadata,
});

---

6. Inline Styles Everywhere

❌ Anti-Pattern

<div style={{ /* many inline values */ }} />

✅ Better Pattern

<div className="card" />

---

7. Scattered Filter Logic

❌ Anti-Pattern

// repeated in many places
data.filter(/* custom logic */);

✅ Better Pattern

applyFilters(data, filters);

---

8. any Type Abuse

❌ Anti-Pattern

function process(data: any): any {}

✅ Better Pattern

function process(data: KnownType): ResultType {}

---

9. Prop Drilling

❌ Anti-Pattern

<ComponentA prop={x}>
  <ComponentB prop={x}>
    <ComponentC prop={x} />
  </ComponentB>
</ComponentA>

✅ Better Pattern

// shared context / store
useSharedValue();

---

10. God Components

❌ Anti-Pattern

// 1000-line component
// state + API + logic + UI mixed

✅ Better Pattern

// small components
// hooks for logic
// composition at top level

---

11. Premature Optimization

❌ Anti-Pattern

// caching, memoization, virtualization everywhere

✅ Better Pattern

// simple code first
// optimize after measuring

---

12. Poor Error Handling

❌ Anti-Pattern

catch (e) {
  console.log(e);
}

✅ Better Pattern

showErrorToUser();
logErrorWithContext();
allowRetry();

---

Summary Checklist

• Prefer clarity over cleverness
• Centralize logic
• Derive state instead of storing it
• Optimize only after measuring
• Write code for humans first

---

Last updated: February 2026