AI-Generated React Code Falls Short

The increasing use of large language models (LLMs) in frontend development has led to a new challenge: the generation of subpar React code. According to Seth Webster, executive director of the React Foundation, “We’re actually in a post-frontend-framework world, because the AI spits out React and nobody cares what it’s spitting out.” This shift reflects broader industry trends, where AI is being used to automate coding tasks, but the quality of the generated code is not yet on par with human developers.

The problem lies in the training data used by LLMs. Since they are trained on publicly available code, which is often of poor quality, they learn to replicate these flaws. As a result, the generated React code is often simplistic and lacks the nuances of well-crafted code. Webster notes that the best code is often hidden behind private repositories, making it inaccessible to LLMs. This limitation hinders the ability of LLMs to learn from high-quality code and generate better React code.

The impact of this issue is significant, as it can lead to poorly designed and inefficient applications. For instance, LLMs like Claude tend to use refs in React to track state, which is not a good practice. Instead, developers should create external services and integrate them using hooks with React. However, since LLMs are trained on code that crams business logic into React components, they replicate this approach.

To address this challenge, the React Foundation aims to improve the quality of React code generated by LLMs. One approach is to use Model Context Protocol (MCP) servers and evaluations to systematically assess an LLM’s accuracy and reliability. By doing so, developers can guide LLMs to produce better code and eventually create more efficient and scalable applications.

In the meantime, developers must intervene to refine the generated code. As Webster puts it, “It requires a lot of guidance, and it will for a while to come.” This collaboration between humans and AI is crucial in ensuring that the generated code meets the required standards.

Source: https://thenewstack.io/why-ai-is-generating-lowest-common-denominator-react-code