Frontend · JavaScript · Interview

AI-Generated Code Passed Review but Failed the Interview: Three 'Why' Questions That Exposed the Gap

By kyriewen · Aug 10, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI coding tools default to happy-path implementations and common patterns like `useCallback` without context. Developers who skip the "why" step accumulate code they own but don't understand — a gap that technical interviews are specifically designed to expose.

Summary

A senior front-end developer walked into a technical interview confident about their project experience, only to freeze when asked to justify three design choices in their own codebase. A `useCallback` wrapping a handler passed to a native `<input>` had no performance benefit; an autocomplete component contained a race condition from unordered network requests; and a two-line static header was extracted into its own file for no reason. Each piece of code was generated by Claude Code, accepted because it ran, and committed without deeper scrutiny.

The post-interview audit uncovered at least 12 unnecessary `useCallback` instances and a systemic habit: describe requirements to AI, accept the output, and move on. The developer realized they had become a prompt writer and commit tool rather than the author of their own code. The core failure wasn't technical skill — it was the atrophy of the "why" reflex that AI tools quietly encourage.

A self-review checklist and a 3-day pre-interview audit framework emerged from the experience, targeting performance decisions, edge cases, component boundaries, type design, state placement, and dependency reasoning. The takeaway is not to abandon AI but to add a mandatory step: before committing AI-generated code, answer "why this way" for every significant logic block.

Takeaways

— `useCallback` provides zero benefit when passed to native DOM elements; it only matters for `React.memo`-wrapped children or stable effect dependencies.

— AI-generated autocomplete components routinely omit race-condition handling, causing stale search results when network responses arrive out of order.

— Extracting a component that contains only static markup and no state, reuse, or performance boundary adds files and indirection without value.

— Reviewing six months of AI-assisted code revealed 12 unnecessary `useCallback` calls — all added by AI generation inertia, never questioned.

— Five self-check signals can reveal whether you're the code's author or just an AI prompt-and-commit operator.

— A 3-day pre-interview audit covering performance, edge cases, component boundaries, types, state, and dependencies catches AI blind spots before an interviewer does.

— The fix is not to stop using AI but to add a 5-minute "why" review after every AI generation before committing.

Conclusions

AI coding assistants optimize for "runs correctly" on the happy path, but technical interviews optimize for "explain your reasoning" — two metrics that are increasingly at odds.

The `useCallback` reflex in AI-generated React code mirrors a broader pattern: tools apply best-practice templates without evaluating whether the context actually calls for them.

Becoming a prompt writer instead of a code author is not a skill regression but a role shift; the danger is that the shift is invisible until someone asks a question the prompt didn't anticipate.

The interview exposed that code ownership now has two tiers: legal ownership (it's in your repo) and cognitive ownership (you can defend every decision). AI erodes the second without touching the first.

Concepts & terms

Race condition (in autocomplete)

When multiple asynchronous requests are fired in sequence, a slower earlier request may resolve after a faster later request, overwriting the correct result with stale data. Mitigated with AbortController or a cancellation flag in the effect cleanup.

useCallback with native DOM elements

React's `useCallback` stabilizes a function reference to prevent unnecessary re-renders in memoized child components. Native elements like `<input>` and `<button>` do not perform reference comparisons on props, so `useCallback` provides no rendering optimization for them.

Component extraction criteria

A component is worth extracting into its own file when it needs reuse, manages independent state or logic, or serves as a performance boundary with `React.memo`. Static markup that meets none of these criteria adds complexity without benefit.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗