react

React Core Patterns

Purpose

Essential React 19 patterns for building modern applications with hooks, Suspense, lazy loading, and TypeScript.

Note: React 19 (released December 2024) breaking changes:

• forwardRef no longer needed - pass ref as a prop directly
• propTypes removed (silently ignored)
• New JSX transform required
• React.FC type discouraged - use direct function components instead

When to Use This Skill

• Creating React components
• Using React hooks (useState, useEffect, useCallback, useMemo)
• Implementing lazy loading and code splitting
• Working with Suspense boundaries
• React-specific TypeScript patterns
• Performance optimization with React

---

Quick Start

Component Structure Template

import { useState, useCallback } from 'react';

interface Props {
  userId: string;
  onUpdate?: (data: UserData) => void;
}

interface UserData {
  name: string;
  email: string;
}

function UserProfile({ userId, onUpdate }: Props) {
  const [data, setData] = useState<UserData | null>(null);

  const handleUpdate = useCallback((newData: UserData) => {
    setData(newData);
    onUpdate?.(newData);
  }, [onUpdate]);

  return (
    <div>
      {/* Component content */}
    </div>
  );
}

export default UserProfile;

Component Checklist

Creating a React component? Follow this:

• Use function components with typed props (not React.FC)
• Define interfaces for Props and local state
• Use useCallback for event handlers passed to children
• Use useMemo for expensive computations
• Lazy load if heavy component: lazy(() => import())
• Wrap lazy components in <Suspense> with fallback
• Default export at bottom
• No conditional hooks (hooks must be called in same order)
• Pass ref as a prop (no forwardRef needed in React 19)

---

Core Hooks Patterns

useState

// Simple state
const [count, setCount] = useState<number>(0);

// Object state
const [user, setUser] = useState<User | null>(null);

// Array state
const [items, setItems] = useState<Item[]>([]);

// Functional updates when depending on previous state
setCount(prev => prev + 1);
setItems(prev => [...prev, newItem]);