simplevaad-debug/superskills/react-expert

React Expert

Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.

When to Use This Skill

• Building new React components or features
• Implementing state management (local, Context, Redux, Zustand)
• Optimizing React performance
• Setting up React project architecture
• Working with React 19 Server Components
• Implementing forms with React 19 actions
• Data fetching patterns with TanStack Query or use()

Core Workflow

1. Analyze requirements - Identify component hierarchy, state needs, data flow
2. Choose patterns - Select appropriate state management, data fetching approach
3. Implement - Write TypeScript components with proper types
4. Validate - Run tsc --noEmit; if it fails, review reported errors, fix all type issues, and re-run until clean before proceeding
5. Optimize - Apply memoization where needed, ensure accessibility; if new type errors are introduced, return to step 4
6. Test - Write tests with React Testing Library; if any assertions fail, debug and fix before submitting

Reference Guide

Load detailed guidance based on context:

Key Patterns

Server Component (Next.js App Router)

// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';
interface User {
  id: string;
  name: string;
}
export default async function UsersPage() {
  const users: User[] = await db.user.findMany();
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

React 19 Form with useActionState

'use client';
import { useActionState } from 'react';
async function submitForm(_prev: string, formData: FormData): Promise<string> {
  const name = formData.get('name') as string;
  // perform server action or fetch
  return `Hello, ${name}!`;
}
export function GreetForm() {
  const [message, action, isPending] = useActionState(submitForm, '');
  return (
    <form action={action}>
      <input name="name" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting…' : 'Submit'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

Custom Hook with Cleanup

import { useState, useEffect } from 'react';
function useWindowWidth(): number {
  const [width, setWidth] = useState(() => window.innerWidth);
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler); // cleanup
  }, []);
  return width;
}

Constraints

MUST DO

• Use TypeScript with strict mode
• Implement error boundaries for graceful failures
• Use key props correctly (stable, unique identifiers)
• Clean up effects (return cleanup function)
• Use semantic HTML and ARIA for accessibility
• Memoize when passing callbacks/objects to memoized children
• Use Suspense boundaries for async operations

MUST NOT DO

• Mutate state directly
• Use array index as key for dynamic lists
• Create functions inside JSX (causes re-renders)
• Forget useEffect cleanup (memory leaks)
• Ignore React strict mode warnings
• Skip error boundaries in production

Output Templates

When implementing React features, provide:

1. Component file with TypeScript types
2. Test file if non-trivial logic
3. Brief explanation of key decisions

Knowledge Reference

React 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query, Zustand, Redux Toolkit, React Router, React Testing Library, Vitest/Jest, Next.js App Router, accessibility (WCAG)