Claude Code के साथ production React development: components, Hooks, tests और review

Claude Code React development को तेज कर सकता है, लेकिन production team को सिर्फ speed नहीं चाहिए। Team को छोटे, reviewable और tested changes चाहिए। अगर prompt सिर्फ “एक अच्छा dashboard बना दो” है, तो अक्सर बहुत सारे components, बहुत सारी props और कम confidence मिलता है।

यह guide React + TypeScript workflow समझाती है: component boundaries, props, state, custom hooks, forms, data fetching, Testing Library, accessibility, performance और review prompt. Official baseline के लिए React docs, React Testing Library, MDN ARIA और Claude Code docs देखें। Related ClaudeCodeLab articles: TypeScript tips, testing strategies, accessibility, performance optimization.

Code से पहले contract लिखें

Props का मतलब parent से child component को मिलने वाला input है। State वह value है जिसे UI याद रखती है। Custom hook वह reusable function है जो state और side effects की logic रखता है। Side effects में API call, timer और localStorage जैसे काम आते हैं।

जानकारी	उदाहरण	फायदा
UI responsibility	users list, role filter, activate	बड़ा component बनने से बचता है
State location	parent, URL, hook, server cache	random useState कम होते हैं
Data shape	User, API response, empty state	props और tests clear होते हैं
Verification	npm test, npm run build, keyboard	review evidence मिलता है

Real use cases

पहला use case internal admin list है: users, invoices, tickets, roles, products. Claude Code filters, table, row actions, empty state और error state बना सकता है, लेकिन API type बदलने से रोकना चाहिए।

दूसरा use case forms है: profile edit, contact form, checkout, training signup. Prompt में label, validation, submitting state और retry behavior लिखें। बड़े forms के लिए React Hook Form guide देखें।

तीसरा use case data fetching screen है: search results, notifications, dashboard. Server state यानी server पर मौजूद data को temporary UI state से अलग रखें। TanStack Query के लिए TanStack Query guide, छोटे client state के लिए Zustand guide देखें।

चौथा use case review है। Claude Code से new UI बनवाने के बजाय diff review करवाएं: component boundary, unnecessary Effect, missing labels, weak tests, avoidable re-render.

Component diagram

UserAdminPage
  -> UserFilters: search और role filter
  -> UserTable: table और actions
  -> UserStatusBadge: सिर्फ status display
  -> UserEditDialog: edit form
  -> useUsers: fetch, refresh, error

अगर component की props एक sentence में explain नहीं होतीं, तो component शायद बहुत काम कर रहा है। अगर component सिर्फ एक जगह है और behavior नहीं है, तो extraction जल्दी हो सकती है।

Typed React component

import type { FormEvent } from "react";

export type UserRole = "admin" | "editor" | "viewer";

export type User = {
  id: string;
  name: string;
  email: string;
  role: UserRole;
  active: boolean;
};

type UserTableProps = {
  users: User[];
  selectedRole: "all" | UserRole;
  onRoleChange: (role: "all" | UserRole) => void;
  onToggleActive: (id: string) => void;
};

export function UserTable({ users, selectedRole, onRoleChange, onToggleActive }: UserTableProps) {
  const filteredUsers = selectedRole === "all" ? users : users.filter((user) => user.role === selectedRole);

  function handleRoleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    onRoleChange(formData.get("role") as "all" | UserRole);
  }

  return (
    <section aria-labelledby="user-table-title">
      <h2 id="user-table-title">Team members</h2>
      <form onSubmit={handleRoleSubmit} style={{ marginBottom: 12 }}>
        <label htmlFor="role">Filter by role </label>
        <select id="role" name="role" defaultValue={selectedRole}>
          <option value="all">All</option>
          <option value="admin">Admin</option>
          <option value="editor">Editor</option>
          <option value="viewer">Viewer</option>
        </select>
        <button type="submit">Apply</button>
      </form>
      {filteredUsers.length === 0 ? (
        <p role="status">No users match this filter.</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Email</th>
              <th scope="col">Role</th>
              <th scope="col">Status</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {filteredUsers.map((user) => (
              <tr key={user.id}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.role}</td>
                <td>{user.active ? "Active" : "Paused"}</td>
                <td>
                  <button type="button" onClick={() => onToggleActive(user.id)}>
                    {user.active ? "Pause" : "Activate"}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </section>
  );
}

Hook और test

import { useEffect, useState } from "react";
import type { User } from "./UserTable";

type UsersState =
  | { status: "loading"; users: User[]; error: null }
  | { status: "success"; users: User[]; error: null }
  | { status: "error"; users: User[]; error: string };

export function useUsers(endpoint: string) {
  const [state, setState] = useState<UsersState>({ status: "loading", users: [], error: null });

  useEffect(() => {
    const controller = new AbortController();
    async function loadUsers() {
      setState({ status: "loading", users: [], error: null });
      try {
        const response = await fetch(endpoint, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const users = (await response.json()) as User[];
        setState({ status: "success", users, error: null });
      } catch (error) {
        if (error instanceof DOMException && error.name === "AbortError") return;
        setState({ status: "error", users: [], error: error instanceof Error ? error.message : "Unknown error" });
      }
    }
    void loadUsers();
    return () => controller.abort();
  }, [endpoint]);

  return state;
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { UserTable, type User } from "./UserTable";

const users: User[] = [
  { id: "1", name: "Masa", email: "masa@example.com", role: "admin", active: true },
  { id: "2", name: "Aiko", email: "aiko@example.com", role: "viewer", active: false },
];

describe("UserTable", () => {
  it("filters users and toggles active status", async () => {
    const user = userEvent.setup();
    const onRoleChange = vi.fn();
    const onToggleActive = vi.fn();
    render(<UserTable users={users} selectedRole="all" onRoleChange={onRoleChange} onToggleActive={onToggleActive} />);
    await user.selectOptions(screen.getByLabelText(/filter by role/i), "viewer");
    await user.click(screen.getByRole("button", { name: /apply/i }));
    await user.click(screen.getByRole("button", { name: /activate/i }));
    expect(onRoleChange).toHaveBeenCalledWith("viewer");
    expect(onToggleActive).toHaveBeenCalledWith("2");
  });
});

Review prompt

इस React + TypeScript diff को review करें।
Component boundaries, बहुत ज्यादा props, unnecessary useEffect, UI state और server state mix, form labels, error messages, Testing Library coverage और large list re-render risk देखें।
नई library add न करें। अंत में npm test और npm run build checklist दें।

Common pitfalls

सबसे आम समस्याएं हैं over-generated components, derived values के लिए useEffect, label के बिना input, accessible name के बिना icon button, error को सिर्फ color से दिखाना, और measurement के बिना memo. Claude Code को साफ कहें: smallest useful abstraction, user-perspective test और accessibility check.

CTA और result note

Team adoption के लिए rules को CLAUDE.md में रखें: component boundaries, test commands, accessibility और over-abstraction limits. Real React repo पर यह workflow लागू करना हो तो ClaudeCodeLab training और consultation में UI review, Testing Library, performance proof और consultation/signup CTA design कर सकते हैं।

Practical result: content-site admin UI पर Masa ने पाया कि पहले boundary, state ownership और test expectation देने से props cleanup और accessibility rework कम हुआ। सबसे stable approach है छोटा, verified diff; ज्यादा generation नहीं।