I Asked AI to Build the Same Feature in React and Plain JavaScript. The Difference Surprised Me

2026-07-07 · Source: Artificial Intelligence in Plain English - Medium · Field: Technology & Digital — Software Development & Engineering, Artificial Intelligence & Machine Learning · Depth: Intermediate, short

Summary

An experiment compared an AI coding assistant's performance building a simple form feature in plain JavaScript versus a React setup. The plain JS version generated clean code on the first attempt, whereas the React version required three iterations to correct issues like missing imports, prop mismatches, and non-existent hooks. This increased friction in React is attributed to frameworks spreading logic across multiple files (e.g., component, validation schema, types, shared hooks), which forces the AI to infer conventions rather than "seeing" explicit logic. Additionally, React's flexibility in state management offers multiple valid patterns, leading the AI to make less predictable choices. The author notes that qualities beneficial for human teams, such as flexibility and distributed conventions, can complicate single-pass AI code generation.

Key takeaway

For software engineers or prompt engineers working with AI coding assistants on framework-heavy features, you should explicitly guide the AI to minimize ambiguity. Start by requesting the entire feature in a single file, then refactor it into your project's structure. Clearly state state-management choices and provide concrete examples from your codebase to improve accuracy. Always budget for a review pass, as the AI's initial output, especially with complex frameworks, is often a rough draft requiring refinement.

Key insights

Framework qualities beneficial for human teams can complicate single-pass AI code generation.

Principles

• Frameworks distribute logic across files, relying on conventions.
• Tool flexibility aids human developers but risks AI code generation.

In practice

• Request single-file code from AI, then refactor.
• Specify state-management choices in AI prompts.
• Provide AI with concrete codebase examples.

Topics

• AI Coding Assistants
• React.js
• JavaScript
• Code Generation
• Prompt Engineering
• Software Frameworks

Best for: Software Engineer, Prompt Engineer

Related on AIssential

• Top 5 Claude Skills For React Developer — Claude AI streamlines React development by automating design-to-code, debugging, and refactoring tasks.
• JavaScript Was Designed for Humans. What If We Built a Language for AI? — Programming languages designed for humans hinder AI code generation; an AI-native layer is needed for explicit machine reasoning.
• Build Your Own App In Just 30 Minutes! Full Course with Andrew Ng — AI empowers rapid software development for anyone through iterative, specific prompting, transforming ideas into working apps in minutes.
• Prompt Engineering Is Dead. Here’s What Actually Gets AI to Write Good Code. — Effective AI code generation hinges on providing comprehensive context, not just refined prompts.
• Build Interactive Agents with Generative UI — AI agents are evolving from text-only outputs to generating interactive, custom user interfaces.
• Issue #131 - Build an Agent in LangChain — LangChain's `create_agent` simplifies ReAct agent deployment by integrating reasoning, acting, and tool management.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Artificial Intelligence in Plain English - Medium.