跪拜 Guibai
← All articles
Frontend · JavaScript · AI Programming

AI Code Review Catches Nulls and XSS Instantly — and Still Can't Tell You a Discount Makes Prices Negative

By kyriewen ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI-generated PRs are flooding teams — GitLab reports 85% of developers say the bottleneck has already shifted from writing code to reviewing it. Knowing exactly which review tasks AI can absorb (and which it will silently botch) is the difference between a faster pipeline and a pipeline that ships negative prices and broken permission guards.

Summary

Running Claude Code against a 30,000-line React frontend revealed a sharp split in capability. AI caught unhandled nulls, performance anti-patterns, XSS vectors, naming inconsistencies, and repeated code patterns across 14 components — checks human reviewers routinely skip. On the other side, it missed that a price calculation could go negative when a discount exceeds the original price, recommended three individually correct optimizations that would combine to trash rendering performance, and suggested replacing a readable if-else chain with a lookup map that would confuse the next developer adding a role.

The experiment produced a practical division of labor: AI handles correctness checks (nulls, perf, security, style, duplication) while humans own business logic, architecture, UX impact, and cross-module side effects. The author's revised workflow runs an AI scan in five minutes, then spends ten minutes on the questions AI cannot answer — whether the requirement is understood, whether the solution is the simplest, and whether users will hate it.

One hard rule emerged: code AI marks clean is not actually clean. It only means nothing is wrong within the model's visible range. Business rules, architectural coherence, and user experience remain exclusively human territory.

Takeaways
AI caught unhandled nulls from useQuery, unsafe property access, and missing loading/error states that human reviewers gloss over because they assume the pattern is handled.
Performance anti-patterns like inline object creation and inline callbacks inside map were flagged across the project — checks humans rarely have patience for at scale.
XSS via dangerouslySetInnerHTML and unencoded URL parameters in fetch calls were flagged; research shows only 10.5% of AI-generated code is secure despite 61% being functionally correct.
Naming inconsistencies (Info/Data/Detail for the same concept) and boolean prefix drift (is/has/can vs. bare userLoggedIn) were caught project-wide.
A loading/error/success pattern repeated in 14 components was identified for extraction into a custom useAsync hook — cross-file duplication human reviewers never spot in single-PR reviews.
AI missed that price - discount can produce negative values when the discount exceeds the price, because it has no knowledge of e-commerce business constraints.
Three individually correct AI suggestions (React.memo, Context, virtual scrolling) would combine to cause constant re-renders and state resets — AI optimizes parts, not systems.
A delete button with no confirmation, no loading state, no debounce, and no undo passed AI review because AI has never used the product and only sees code.
Changing a user role in one module broke a permission guard in another module that used cached auth data — AI reviewed each file in isolation and flagged nothing.
AI suggested replacing an if-else chain with a lookup map, making it harder for future developers to add new roles — not all refactoring improves maintainability.
Conclusions

The asymmetry is striking: AI is strongest at the tedious, mechanical checks humans hate doing and weakest at the judgement calls that define senior engineering — business rules, architectural coherence, and user empathy. This makes it a force multiplier for senior devs and a liability for juniors who might trust its clean bill of health.

The finding that AI is good at catching security flaws in AI-generated code — because it knows its own failure modes — suggests a self-auditing loop could become standard: generate, then have the same model review for the vulnerability patterns it tends to produce.

AI's inability to reason about cross-module side effects is not a temporary context-window limitation; it's a fundamental architectural blindness. Even with infinite context, today's models lack a causal model of how data flows through a system over time, which is what makes a permission-guard cache-staleness bug invisible to them.

The 'correct but harmful' refactoring problem — replacing explicit if-else with a lookup map — is a reminder that code is read and modified by humans who follow patterns. Optimizing for elegance can destroy the discoverability that makes a codebase maintainable by a rotating cast of developers.

Concepts & terms
XSS (Cross-Site Scripting)
A security vulnerability where untrusted content is injected into a web page and executed as code. In React, dangerouslySetInnerHTML and unescaped URL parameters are common vectors.
React.memo
A higher-order component that memoizes a component, preventing re-renders when props haven't changed. Can backfire when combined with Context — a Context value change forces all consuming memo components to re-render anyway.
Virtual scrolling
A technique that renders only the visible portion of a long list, recycling DOM nodes to maintain performance. State resets caused by parent re-renders can destroy the scroll position and user context.
useQuery (React Query/TanStack Query)
A hook for fetching, caching, and synchronizing server state. Returns data, isLoading, and error states that must all be handled; assuming data exists before loading completes is a common crash source.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗