Files
claudekit/skills/performance-optimization/references/anti-patterns.md
T
2026-04-19 14:10:38 +07:00

2.9 KiB

Performance Anti-Patterns

N+1 Queries

Signal: Many small queries instead of one batch query.

SQLAlchemy (Python)

# BAD: N+1 — each user triggers a query for posts
users = session.query(User).all()
for user in users:
    print(user.posts)  # lazy load, 1 query per user

# GOOD: eager loading
from sqlalchemy.orm import joinedload, selectinload
users = session.query(User).options(selectinload(User.posts)).all()

Prisma (TypeScript)

// BAD: N+1
const users = await prisma.user.findMany();
for (const user of users) {
  const posts = await prisma.post.findMany({ where: { authorId: user.id } });
}

// GOOD: include
const users = await prisma.user.findMany({ include: { posts: true } });

Django

# BAD
for order in Order.objects.all():
    print(order.customer.name)  # N+1

# GOOD
for order in Order.objects.select_related('customer').all():
    print(order.customer.name)  # 1 query with JOIN

Unnecessary Re-renders (React)

Signal: Components re-rendering when their data hasn't changed.

// BAD: new object created every render
<Child style={{ color: 'red' }} />

// GOOD: stable reference
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />

// BAD: new function every render
<Button onClick={() => handleClick(id)} />

// GOOD: stable callback
const handleClick = useCallback(() => doSomething(id), [id]);
<Button onClick={handleClick} />

Detect with: React DevTools Profiler → "Highlight updates when components render"

Blocking the Event Loop (Node.js)

Signal: High event loop lag, slow response times.

// BAD: synchronous file read blocks everything
const data = fs.readFileSync('large-file.json');

// GOOD: async
const data = await fs.promises.readFile('large-file.json');

// BAD: CPU-heavy in main thread
const hash = crypto.pbkdf2Sync(password, salt, 100000, 64, 'sha512');

// GOOD: async or worker_threads
const hash = await new Promise((resolve, reject) => {
  crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, key) => {
    err ? reject(err) : resolve(key);
  });
});

Memory Leaks

Python

  • Circular references with __del__
  • Unclosed file handles / DB connections
  • Growing global caches without TTL
  • Detect: objgraph, tracemalloc

JavaScript

  • Detached DOM nodes
  • Forgotten event listeners (addEventListener without removeEventListener)
  • Closures capturing large scopes
  • Unbounded Map/Set growth
  • Detect: Chrome Heap Snapshots, process.memoryUsage()

Heavy Imports / Bundle Bloat

// BAD: imports entire library
import _ from 'lodash';

// GOOD: tree-shakeable import
import { debounce } from 'lodash-es';

// GOOD: native alternative
const debounce = (fn, ms) => { /* 5 lines */ };

Replace heavy deps: moment → dayjs, lodash → lodash-es or native, date-fns (tree-shakeable). Use React.lazy() + Suspense for route-based code splitting.