Performance Anti-Patterns Reference

N+1 Query Problem

The N+1 problem occurs when code executes N additional queries to fetch related data for N items from an initial query.

Identification:

• •Queries inside loops
• •Lazy loading of associations during iteration
• •GraphQL resolvers fetching per-item

Fix Strategies:

1. •Eager Loading: Load related data in initial query
2. •Batching: Collect IDs, fetch all at once
3. •DataLoader: For GraphQL, batch and cache per-request
4. •Denormalization: Store computed/related data together

Severity: HIGH - Scales linearly with data size, causes exponential slowdown

Over-Fetching

Retrieving more data than needed from API or database.

Identification:

• •SELECT * queries
• •API endpoints returning full objects
• •No field selection support
• •Loading nested relations by default

Fix Strategies:

1. •Field Selection: Only query needed columns
2. •Sparse Fieldsets: Support ?fields=id,name parameter
3. •GraphQL: Let clients specify exact fields
4. •DTOs: Map to response-specific objects

Severity: MEDIUM - Increases bandwidth, memory, serialization time

Under-Fetching

Requiring multiple requests to get needed data.

Identification:

• •Waterfall requests (request depends on previous)
• •Multiple endpoints for related data
• •No include/expand support

Fix Strategies:

1. •Compound Endpoints: /users?include=orders
2. •GraphQL: Single query for nested data
3. •BFF Pattern: Backend aggregates for frontend
4. •Parallel Requests: When dependencies allow

Severity: MEDIUM - Increases latency, connection overhead

Missing Pagination

Returning unbounded result sets.

Identification:

• •List endpoints without limit
• •findAll() without pagination
• •No cursor for large datasets

Fix Strategies:

1. •Offset Pagination: ?page=1&limit=20
2. •Cursor Pagination: ?cursor=abc&limit=20 (better for large sets)
3. •Default Limits: Always apply max limit server-side
4. •Streaming: For very large exports

Severity: HIGH - Can crash server/client with large data

Inefficient Algorithms

O(n²) or worse complexity where better solutions exist.

Identification:

• •Nested loops on collections
• •Repeated array.find/includes in loops
• •String concatenation in loops
• •Sort inside loops

Fix Strategies:

1. •Use Maps/Sets: O(1) lookup instead of O(n)
2. •Single Pass: Combine operations
3. •Pre-compute: Calculate once, reuse
4. •Better Algorithms: Binary search for sorted data

Severity: HIGH - Becomes unusable with large data

Unnecessary Re-renders (Frontend)

Components re-rendering when their output hasn't changed.

Identification:

• •Inline objects/arrays in JSX
• •Inline function handlers
• •Missing React.memo/useMemo/useCallback
• •Context changes affecting all consumers

Fix Strategies:

1. •Memoization: React.memo for components
2. •Stable References: useMemo for objects, useCallback for functions
3. •Context Splitting: Separate frequently-changing state
4. •Selectors: Only subscribe to needed state slices

Severity: MEDIUM-HIGH - Causes janky UI, especially on lists

Sequential Async Operations

Running async operations one-by-one when parallel is possible.

Identification:

• •Sequential await statements
• •Waterfall promises
• •Loop with await inside

Fix Strategies:

1. •Promise.all: Run independent operations in parallel
2. •Promise.allSettled: When some can fail
3. •Batching: Group operations efficiently
4. •Pipelining: Stream processing

Severity: MEDIUM - Multiplies latency

Quick Reference by Layer

Database

Backend

Frontend

API