How AI Changed the Way I Write React Code — 2 Years In

I'm Safdar Ali, a frontend engineer in Bengaluru. In late 2024 I installed GitHub Copilot as an experiment. Today — October 2026 — Cursor Agent with Claude is open on every project, including this portfolio at safdarali.in. Two years of daily ai react development did not make me obsolete. It changed where I spend cognitive effort: less on boilerplate, more on architecture, review, and the questions AI cannot answer. This is an honest accounting — not a pitch for any tool.

What actually changed in my daily work

Speed on scaffolding. New components, API route stubs, Zod schemas, and test files appear in minutes instead of half-hours. I start further along on every task.

Context switching dropped. I used to alt-tab between docs, Stack Overflow, and my editor constantly. Now I ask the agent to explain an unfamiliar API against my actual codebase — the answer is contextual, not generic.

Refactors got cheaper. Renaming a prop across 12 files, converting client fetches to Server Components, adding TypeScript strict types to a legacy module — these used to be "schedule for Friday" tasks. Now they're afternoon tasks with review.

My commit size changed. More frequent, smaller commits. AI generates chunks; I review and merge chunk by chunk instead of writing 400-line PRs manually.

// 2024 — I wrote every line of this by hand
export function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

// 2026 — AI generates this in 3 seconds; I verify edge cases and add tests
// My value-add: knowing WHEN to debounce, not typing the hook from memory

What did not change — and probably never will

Architecture decisions. Server Component vs client component boundaries, state management choices, caching strategy — AI suggests patterns but cannot know your product constraints, team size, or traffic profile.

Debugging production incidents. AI helps read stack traces. It does not replace opening DevTools at 11pm when a hydration mismatch only appears on Android Chrome in India.

Code review judgment. Someone must reject the confident wrong output. That someone needs to understand React reconciliation, not just prompt engineering.

Stakeholder communication. Translating "we need ISR here because catalog updates hourly" into business language — no model does that for you.

What surprised me most over two years: AI did not reduce total hours worked — it shifted where those hours go. I spend less time writing boilerplate and more time in code review, architecture discussions, and debugging the subtle bugs AI introduces — wrong dependency arrays, missing error boundaries, imports from packages not in package.json. The job got more senior, not more absent.

Pair programming changed too. When I mentor juniors in Bengaluru, we use AI together — they prompt, I ask why they accepted the output, we fix it together. That teaches review skills faster than solo tutorial watching. The tool is the same; the mentorship model adapted.

Skills that matter more now — ranked honestly

Before and after — same feature, two eras

Adding a contact form to a Next.js portfolio — the task I did for this site in 2024 vs 2026.

// BEFORE (2024) — ~4 hours total
// 1. Create API route manually (30 min)
// 2. Write client form with useState validation (45 min)
// 3. Style with Tailwind trial-and-error (60 min)
// 4. Add loading/error states (30 min)
// 5. Debug CORS and env vars (45 min)
// 6. Write tests (30 min)

// AFTER (2026) — ~90 minutes total
// 1. Agent scaffolds Server Action + Zod validation (5 min gen, 15 min review)
// 2. v0 generates form UI, I wire action prop (10 min gen, 20 min review)
// 3. Manual: rate limiting, honeypot, email provider integration (40 min)
// 4. Tests generated, I add edge cases (10 min)

// Time saved: ~2.5 hours. Time still required: integration + review.

The saved time went into performance work and content — not into leaving early. AI shifted the work mix, not the total output expectation.

Code quality did not automatically improve — it shifted form. I write fewer lines manually but read more lines in review. Net lines of code per feature dropped roughly 20% on client projects where AI handled boilerplate, but bug density stayed similar when measured per thousand lines. The bugs moved from typos to logic errors in AI-generated conditionals — a different debugging skill, not fewer bugs by default.

What this means if you are learning React in India

Juniors ask me: "Should I learn to code if AI writes it?" Yes — but learn differently. Skip memorising array method signatures; do not skip building a todo app without AI so you understand state updates. Use AI to explain errors, not to skip the error entirely.

Interviewers in Bengaluru still ask you to walk through a component you wrote. If AI wrote all of it and you cannot explain useEffect dependencies, you will not pass. The bar moved from "can you type code" to "can you own code."

// Bad learning loop — paste AI output, ship, repeat
// You never build mental models

// Good learning loop — AI as tutor
// 1. Try writing the hook yourself (15 min)
// 2. Ask AI to review YOUR code, not generate fresh
// 3. Compare its suggestions to your attempt
// 4. Write the final version by hand with its hints

export function ProductFilter({ onFilter }: { onFilter: (q: string) => void }) {
  const [query, setQuery] = useState("");
  const debounced = useDebounce(query, 300);

  useEffect(() => {
    onFilter(debounced);
  }, [debounced, onFilter]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

Mistakes I made adopting AI too fast

Shipping AI-generated auth logic without reading it — found a missing CSRF check in review, not in production, luckily. Accepting overly abstracted code because it looked "clean" — three files for what should have been one function. Stopping practice on fundamentals because autocomplete felt good enough — until a whiteboard interview reminded me why muscle memory matters.

The fix was rules, not quitting AI: never merge agent output without reading every changed line; never let AI touch auth, payments, or PII handling without manual security review; keep one personal project per month with AI disabled to stay sharp.

Tools will keep improving — faster models, better repo indexing, cheaper inference. The developers who treat that as leverage rather than replacement will compound their careers. The ones who stop learning fundamentals because autocomplete feels good enough will hit a ceiling in interviews and production incidents. I have seen both outcomes in my network across India's tech hubs over the last two years.

My YouTube audience often asks whether AI makes React tutorials obsolete. No — it makes understanding React more valuable. When anyone can generate a component, the developer who explains why it re-renders, why keys matter, and why the Server Component boundary exists becomes the one teams hire. That is the real shift behind ai react development 2026.

My weekly rhythm with AI in 2026

Monday: plan features manually — no AI for architecture decisions. Tuesday–Thursday: Cursor Agent for implementation, Copilot tab completion while I edit agent output. Friday: code review day — re-read the week's merges without AI assist, run Lighthouse and tests, fix anything that slipped through. Weekend: one hour on personal learning with AI disabled — currently revisiting TypeScript generics the slow way.

That rhythm keeps AI as accelerator, not autopilot. The Friday review catches the subtle bugs — missing dependency arrays, hardcoded API URLs, accessibility gaps — that autocomplete does not flag because they are syntactically valid. Two years in, this rhythm matters more than which model or editor I use.

Where ai react development goes from here

Agents will get better at multi-step tasks — migrations, test coverage, dependency upgrades. They will not replace the engineer who decides whether a migration is worth the risk this sprint. The developers who thrive will treat AI like a fast junior: delegate boilerplate, review everything, own the architecture.

I ship roughly 3x more features per month than in 2024, measured by merged PRs on client work — not because AI writes 3x the code, but because the idle time between "I know what to build" and "first working draft" collapsed. That is the real ai react development 2026 story.

Document your own before/after metrics if you adopt AI tools seriously — merged PRs per week, time from ticket to staging, lines changed in review versus lines changed manually. Without numbers, you will not know if AI actually helps your workflow or just feels faster because typing is more entertaining. I review my metrics monthly and adjust tool usage accordingly.

The single takeaway

AI changed my React workflow profoundly — not by replacing thinking, but by removing friction between thinking and implementation. Fundamentals matter more, not less, because the bottleneck moved from typing to judgment. Learn React deeply, use AI aggressively, review ruthlessly.

Two years from now the tools will look different — new models, new editors, maybe AI built into browsers. The pattern will hold: engineers who understand their stack and review AI output will ship faster than engineers who either reject AI entirely or accept it blindly. Meet in the middle. That is where the career growth lives in ai react development 2026 and beyond.

Related: Cursor + Claude React workflow, Copilot vs Cursor comparison. More: safdarali.in/blog.

If you are early in your career, prioritise understanding over speed for the next six months — use AI to explain code you wrote, not to write code you cannot explain. The productivity multiplier kicks in once fundamentals are solid; before that, AI mostly hides gaps that interviews expose.