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
SOCIAL SHARE CARD GENERATOR