// BAD: Using `any` loses type safety entirely
function processData(data: any) {
  return data.items.map((item: any) => item.name);
}
 
// GOOD: Proper typing with validation
interface DataPayload {
  items: Array<{ name: string; quantity: number }>;
}
 
function processData(data: DataPayload): string[] {
  return data.items.map((item) => item.name);
}
 
// BAD: Unchecked index access
function getFirst(items: string[]) {
  return items[0].toUpperCase(); // Runtime error if empty
}
 
// GOOD: Safe access with proper handling
function getFirst(items: string[]): string | undefined {
  return items[0]?.toUpperCase();
}
 
// BAD: Type assertion hiding bugs
const user = response.data as User;
 
// GOOD: Runtime validation with Zod
const user = UserSchema.parse(response.data);

// BAD: Inline object creates new reference every render
function ParentComponent() {
  return <ChildComponent style={{ color: "red" }} config={{ theme: "dark" }} />;
}
 
// GOOD: Stable references prevent unnecessary re-renders
const style = { color: "red" } as const;
const config = { theme: "dark" } as const;
 
function ParentComponent() {
  return <ChildComponent style={style} config={config} />;
}
 
// BAD: useEffect as derived state
function OrderTotal({ items }: { items: OrderItem[] }) {
  const [total, setTotal] = useState(0);
 
  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price * item.quantity, 0));
  }, [items]);
 
  return <span>{total}</span>;
}
 
// GOOD: Derive state directly during render
function OrderTotal({ items }: { items: OrderItem[] }) {
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  return <span>{total}</span>;
}
 
// BAD: Missing cleanup for subscriptions
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;
}, [url]);
 
// GOOD: Proper cleanup prevents memory leaks
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;
  return () => ws.close();
}, [url]);

// BAD: SQL injection via string interpolation
const users = await db.query(`SELECT * FROM users WHERE name = '${name}'`);
 
// GOOD: Parameterized queries
const users = await db.query("SELECT * FROM users WHERE name = $1", [name]);
 
// BAD: XSS via unsanitized input
function Comment({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
 
// GOOD: Sanitize HTML or use safe rendering
import DOMPurify from "isomorphic-dompurify";
 
function Comment({ html }: { html: string }) {
  const sanitized = DOMPurify.sanitize(html, { ALLOWED_TAGS: ["p", "b", "i", "a"] });
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}
 
// BAD: SSRF via user-controlled URL
async function fetchPreview(url: string) {
  const response = await fetch(url); // User can target internal services
  return response.text();
}
 
// GOOD: Validate and restrict URLs
import { URL } from "url";
 
const ALLOWED_HOSTS = new Set(["api.example.com", "cdn.example.com"]);
 
async function fetchPreview(url: string) {
  const parsed = new URL(url);
  if (!ALLOWED_HOSTS.has(parsed.hostname)) {
    throw new Error("URL host not allowed");
  }
  if (parsed.protocol !== "https:") {
    throw new Error("Only HTTPS URLs allowed");
  }
  const response = await fetch(parsed.toString());
  return response.text();
}
 
// BAD: Exposing sensitive data in API responses
return NextResponse.json({ user: dbUser }); // Includes passwordHash, internal IDs
 
// GOOD: Explicit response shaping
return NextResponse.json({
  user: {
    id: dbUser.id,
    name: dbUser.name,
    email: dbUser.email,
    role: dbUser.role,
  },
});

// BAD: N+1 query in a loop
async function getOrdersWithProducts(orderIds: string[]) {
  const orders = await db.select().from(ordersTable).where(inArray(ordersTable.id, orderIds));
  for (const order of orders) {
    order.products = await db.select().from(productsTable)
      .where(eq(productsTable.orderId, order.id)); // N queries!
  }
  return orders;
}
 
// GOOD: Single query with join
async function getOrdersWithProducts(orderIds: string[]) {
  return db.select()
    .from(ordersTable)
    .leftJoin(productsTable, eq(ordersTable.id, productsTable.orderId))
    .where(inArray(ordersTable.id, orderIds));
}
 
// BAD: Missing pagination on large dataset
async function getAllUsers() {
  return db.select().from(usersTable); // Could return millions of rows
}
 
// GOOD: Cursor-based pagination
async function getUsers(cursor?: string, limit = 20) {
  const query = db.select().from(usersTable).orderBy(usersTable.id).limit(limit + 1);
  if (cursor) {
    query.where(gt(usersTable.id, cursor));
  }
  const rows = await query;
  return {
    users: rows.slice(0, limit),
    nextCursor: rows.length > limit ? rows[limit - 1].id : null,
  };
}
 
// BAD: Blocking the event loop
function processLargeFile(path: string) {
  const content = fs.readFileSync(path, "utf-8"); // Blocks entire server
  return parseCSV(content);
}
 
// GOOD: Stream processing
async function processLargeFile(path: string) {
  const stream = fs.createReadStream(path, { encoding: "utf-8" });
  const results: ParsedRow[] = [];
  for await (const chunk of stream.pipe(csvParser())) {
    results.push(chunk);
  }
  return results;
}

## Review Summary
 
**Overall**: Approve / Request Changes / Comment
 
### Key Findings
 
#### Blocking
- [ ] **Security**: Raw SQL query in `src/api/search.ts:42` is vulnerable to injection
- [ ] **Bug**: Race condition in `useCart` hook when adding items concurrently
 
#### Suggestions
- [ ] Extract `formatOrderSummary` into shared utility (used in 3 places)
- [ ] Consider `useMemo` for the filtered product list computation (200+ items)
 
#### Nits
- [ ] Rename `data` variable to `orderDetails` for clarity (line 87)
- [ ] Prefer `const` over `let` where value is not reassigned (lines 12, 45)
 
### Testing
- Missing test for error case when payment fails
- E2E test for checkout flow looks solid
 
### Architecture
- Changes align well with the existing patterns
- Good separation of server/client components