React Vibe Code Cleanup

Where Copilot Breaks React Patterns

AI tools generate React code that looks correct. It compiles. It renders. But it falls apart under real usage.

The biggest issue is component sprawl. AI doesn’t think about composition. Ask it to build a dashboard and you get 40 flat components, each with their own state, each fetching their own data, each ignoring the component next to it. There’s no shared abstraction. No reusable patterns. Just a wall of files that each solve one prompt.

Prop drilling is the second pattern we see constantly. AI passes data through four or five component layers because it doesn’t know your app’s state architecture. It doesn’t use context where it should. It doesn’t colocate state where it belongs. Every parent becomes a data pipe for its children.

Then there’s the performance problem. AI never adds useMemo or useCallback unless you explicitly ask. It creates new object references on every render and passes them as props. React re-renders the entire subtree because referential equality fails. Your users feel this as input lag, stuttering scrolls, and slow tab switches.

The generated tests are equally hollow. AI loves to test implementation details. It mocks every dependency, asserts on internal state, and tests that a function was called - not that the user sees the right thing on screen. These tests pass when the code is broken and break when the code is fine.

How We Untangle Component Sprawl and Re-Render Chains

We start with React DevTools Profiler in production mode. Not development - production. We record real user flows and identify which components re-render unnecessarily, which renders are expensive, and where the bottlenecks actually live. Data drives the cleanup, not guesses.

Next, we audit the component tree. We map every component, its dependencies, its state, and its render frequency. Components that share logic get consolidated into custom hooks. Components that exist only to pass props get eliminated. The goal is a tree where each component has a clear, single reason to exist.

State management gets restructured from the ground up. Server state moves to TanStack Query. It handles caching, deduplication, background refetching, and stale-while-revalidate out of the box. Client state stays local unless it genuinely needs to be shared. When it does, Zustand or well-scoped Context handles it. No more Redux boilerplate for a boolean toggle.

We rewrite tests to focus on user behavior. Does the button show the right label? Does submitting the form display a success message? Does the error state render when the API fails? These tests survive refactors because they test what users see, not how the code works internally.

From 45ms Renders to Instant Interactions

Before: A dashboard with 180 components. Average render time of 45ms per interaction. Three different state management approaches in the same app. A test suite that takes 8 minutes and catches zero real bugs.

After: 90 components with clear responsibilities. Render time under 8ms per interaction. One state management strategy that the whole team understands. A test suite that runs in 2 minutes and actually prevents regressions.

The difference isn’t subtle. Pages that lagged on every click become instant. New features that took a week because developers had to understand 15 interconnected components now take a day because the architecture makes sense. Onboarding a new developer goes from two weeks to two days.

Guardrails That Keep AI-Generated Components in Check

We configure ESLint with rules that catch the patterns AI generates. react-hooks/exhaustive-deps is enforced. No inline object creation in JSX props. No anonymous components. These rules fail the build, not just show warnings.

We establish component patterns your team follows. A documented approach for data fetching, state management, error handling, and loading states. When AI generates code that doesn’t match these patterns, it’s obvious during code review.

We add Storybook for component isolation. Every shared component gets a story. This forces clean props interfaces and makes it impossible to hide prop drilling behind a working screen. If a component can’t render in Storybook without mocking half the app, it needs refactoring.

TypeScript strict mode catches the type issues AI introduces. No any types. No implicit returns. No missing null checks. The compiler becomes your first line of defense against AI-generated shortcuts.