React Expert Skill

Expert-level React patterns, hooks best practices, performance optimization, and component architecture.

---

Auto-Detection

This skill activates when:

• Working with .jsx, .tsx React files
• Using React hooks (useState, useEffect, etc.)
• Building React components
• Detected react in package.json

---

1. Component Patterns

Function Components Only

// ❌ BAD - Class components (legacy)
class UserCard extends React.Component { }

// ✅ GOOD - Function components
function UserCard({ user }: UserCardProps) {
  return <div>{user.name}</div>;
}

// ✅ GOOD - Arrow function with explicit return type
const UserCard: React.FC<UserCardProps> = ({ user }) => {
  return <div>{user.name}</div>;
};

Props Interface Pattern

// ✅ GOOD - Explicit props interface
interface UserCardProps {
  user: User;
  onSelect?: (user: User) => void;
  className?: string;
  children?: React.ReactNode;
}

function UserCard({
  user,
  onSelect,
  className,
  children
}: UserCardProps) {
  return (
    <div className={className} onClick={() => onSelect?.(user)}>
      <h3>{user.name}</h3>
      {children}
    </div>
  );
}

Compound Components

// ✅ GOOD - Compound component pattern
const Card = ({ children }: { children: React.ReactNode }) => (
  <div className="card">{children}</div>
);

Card.Header = ({ children }: { children: React.ReactNode }) => (
  <div className="card-header">{children}</div>
);

Card.Body = ({ children }: { children: React.ReactNode }) => (
  <div className="card-body">{children}</div>
);

// Usage
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>

---

2. Hooks Best Practices

useState

// ❌ BAD - Object state without proper updates
const [user, setUser] = useState({ name: '', email: '' });
setUser({ name: 'John' }); // Loses email!

// ✅ GOOD - Spread previous state
setUser(prev => ({ ...prev, name: 'John' }));

// ✅ GOOD - Separate states for unrelated values
const [name, setName] = useState('');
const [email, setEmail] = useState('');

// ✅ GOOD - Lazy initialization for expensive computation
const [data, setData] = useState(() => computeExpensiveInitialValue());

useEffect

// ❌ BAD - Missing dependencies
useEffect(() => {
  fetchUser(userId);
}, []); // userId missing!

// ❌ BAD - Object/array in dependencies (infinite loop)
useEffect(() => {
  doSomething(options);
}, [options]); // New object every render!

// ✅ GOOD - Primitive dependencies
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// ✅ GOOD - Cleanup function
useEffect(() => {
  const subscription = subscribe(userId);
  return () => {
    subscription.unsubscribe();
  };
}, [userId]);

// ✅ GOOD - Abort controller for async
useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const response = await fetch(url, { signal: controller.signal });
      const data = await response.json();
      setData(data);
    } catch (error) {
      if (error instanceof Error && error.name !== 'AbortError') {
        setError(error);
      }
    }
  }

  fetchData();
  return () => controller.abort();
}, [url]);

useMemo & useCallback

// ❌ BAD - Unnecessary memoization
const value = useMemo(() => a + b, [a, b]); // Simple math

// ✅ GOOD - Expensive computation
const sortedList = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// ✅ GOOD - Stable callback for child components
const handleClick = useCallback((id: string) => {
  onSelect(id);
}, [onSelect]);

// ✅ GOOD - Prevent child re-renders
const MemoizedChild = React.memo(ChildComponent);

Custom Hooks

// ✅ GOOD - Extract reusable logic
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// ✅ GOOD - Data fetching hook
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    setLoading(true);
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') setError(err);
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

---

3. Conditional Rendering

Safe Patterns

// ❌ BAD - && with numbers (shows "0")
{count && <Badge count={count} />}

// ✅ GOOD - Explicit boolean
{count > 0 && <Badge count={count} />}

// ❌ BAD - && with strings (shows empty string issues)
{title && <Header title={title} />}

// ✅ GOOD - Ternary for clarity
{title ? <Header title={title} /> : null}

// ✅ GOOD - Nullish check
{title != null && title !== '' && <Header title={title} />}

// ✅ GOOD - Early return pattern
function UserProfile({ user }: { user: User | null }) {
  if (user == null) {
    return <LoadingSpinner />;
  }

  return <div>{user.name}</div>;
}

List Rendering

// ❌ BAD - Index as key (causes issues with reordering)
{items.map((item, index) => <Item key={index} item={item} />)}

// ✅ GOOD - Unique ID as key
{items.map(item => <Item key={item.id} item={item} />)}

// ✅ GOOD - Empty state handling
{items.length > 0 ? (
  items.map(item => <Item key={item.id} item={item} />)
) : (
  <EmptyState message="No items found" />
)}

---

4. State Management

Local vs Global State

state_decision[5]{type,use_when,solution}:
  Local state,Component-specific UI,useState
  Lifted state,Shared between siblings,Lift to parent
  Context,Theme/auth/deep props,React Context
  Server state,API data,TanStack Query/SWR
  Global state,Complex app state,Zustand/Redux

Context Pattern

// ✅ GOOD - Typed context with provider
interface AuthContextType {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

export function useAuth() {
  const context = useContext(AuthContext);
  if (context == null) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = useCallback(async (credentials: Credentials) => {
    const user = await authApi.login(credentials);
    setUser(user);
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  const value = useMemo(() => ({ user, login, logout }), [user, login, logout]);

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

---

5. Performance Optimization

Prevent Unnecessary Re-renders

// ✅ GOOD - Memoize expensive components
const ExpensiveList = React.memo(function ExpensiveList({ items }: Props) {
  return items.map(item => <ExpensiveItem key={item.id} item={item} />);
});

// ✅ GOOD - Custom comparison
const UserCard = React.memo(
  function UserCard({ user }: { user: User }) {
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);

// ✅ GOOD - Split components to isolate re-renders
function Parent() {
  return (
    <>
      <FrequentlyUpdating />
      <ExpensiveButStatic />
    </>
  );
}

Code Splitting

// ✅ GOOD - Lazy load routes/components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

---

6. Form Handling

Controlled Components

// ✅ GOOD - Controlled with proper types
function LoginForm({ onSubmit }: { onSubmit: (data: LoginData) => void }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const newErrors: Record<string, string> = {};
    if (email === '') newErrors.email = 'Email is required';
    if (password === '') newErrors.password = 'Password is required';

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    onSubmit({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        aria-invalid={errors.email != null}
      />
      {errors.email != null && <span role="alert">{errors.email}</span>}
      {/* ... */}
    </form>
  );
}

Form Libraries

// ✅ GOOD - React Hook Form + Zod
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

type FormData = z.infer<typeof schema>;

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
    </form>
  );
}

---

7. Error Boundaries

// ✅ GOOD - Error boundary component
class ErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error('Error caught:', error, info);
    // Log to error tracking service
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary fallback={<ErrorPage />}>
  <App />
</ErrorBoundary>

---

Quick Reference

checklist[10]{pattern,do_this}:
  Component type,Function components only
  Props,Interface with explicit types
  Keys,Unique IDs not indices
  useEffect deps,Include all dependencies
  Conditional &&,Use explicit boolean check
  State updates,Spread previous for objects
  Memoization,Only for expensive operations
  Context,Throw if used outside provider
  Forms,Controlled with validation
  Errors,Error boundaries at route level

---

Version: 1.3.0