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(null);

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

  return (
    
      {/* Component content */}
    
  );
}

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 `` 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(0);

// Object state
const [user, setUser] = useState(null);

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

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

useCallback

// Wrap functions passed to child components
const handleClick = useCallback((id: string) => {
  console.log('Clicked:', id);
}, []); // Empty deps if no dependencies

// With dependencies
const handleUpdate = useCallback((data: FormData) => {
  apiCall(userId, data);
}, [userId]); // Re-create when userId changes

useMemo

// Expensive computation
const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.score - b.score);
}, [items]);

// Derived state
const totalPrice = useMemo(() => {
  return cart.reduce((sum, item) => sum + item.price, 0);
}, [cart]);

useEffect

// Run once on mount
useEffect(() => {
  fetchData();
}, []);

// Run when dependency changes
useEffect(() => {
  if (userId) {
    loadUserData(userId);
  }
}, [userId]);

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

---

Lazy Loading & Code Splitting

Basic Lazy Loading

import React, { Suspense } from 'react';

// Lazy load heavy component
const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    
      Dashboard
      Loading chart...}>
        
      
    
  );
}

Multiple Lazy Components

const AdminPanel = React.lazy(() => import('./AdminPanel'));
const UserSettings = React.lazy(() => import('./UserSettings'));
const Reports = React.lazy(() => import('./Reports'));

function App() {
  return (
    }>
      
        } />
        } />
        } />
      
    
  );
}

Feature-Based Code Splitting

// features/auth/index.tsx
export { default } from './AuthFeature';

// Lazy load entire feature
const AuthFeature = React.lazy(() => import('~/features/auth'));

}>
  

---

Suspense Patterns

Suspense Boundaries

// Wrap data-fetching components
}>
  

// Nested Suspense for granular loading
}>
  
  }>
    
  
  

Error Boundaries with Suspense

import { ErrorBoundary } from 'react-error-boundary';

}>
  }>
    
  

---

TypeScript Patterns

Component Props

// Basic props
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

// Props with children
interface CardProps {
  title: string;
  children: React.ReactNode;
}

// Props with specific child types
interface ListProps {
  children: React.ReactElement | React.ReactElement[];
}

// Props with event handlers
interface FormProps {
  onSubmit: (data: FormData) => void;
  onChange?: (field: string, value: unknown) => void;
}

Hooks TypeScript

// useState with type
const [user, setUser] = useState(null);
const [items, setItems] = useState([]);

// useRef with type
const inputRef = useRef(null);
const timerRef = useRef(null);

// Custom hook with return type
function useUser(id: string): { user: User | null; loading: boolean } {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // ... implementation

  return { user, loading };
}

---

Performance Optimization

React.memo

// Memoize component to prevent unnecessary re-renders
const UserCard = React.memo(({ user, onUpdate }) => {
  return (
    
      {user.name}
       onUpdate(user.id)}>Update
    
  );
});

// Custom comparison function
const UserCard = React.memo(UserCardComponent, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id;
});

Avoiding Re-renders

// ❌ Bad: Creates new function on every render
function Parent() {
  return  console.log('clicked')} />;
}

// ✅ Good: Stable function reference
function Parent() {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return ;
}

---

Common Patterns

Conditional Rendering

// Ternary operator
{isLoading ?  : }

// Logical AND
{error && }

// Nullish coalescing
{user ?? }

// Early return for loading states
function Component() {
  const { data } = useSomeHook();

  // ❌ Avoid early returns for loading - breaks hooks rules
  // Use Suspense instead

  return {data.map(...)};
}

Lists and Keys

// Always use stable keys
{items.map(item => (
  
))}

// Never use index as key if list can reorder
// ❌ Bad
{items.map((item, index) => (
  
))}

---

File Organization

Feature-Based Structure

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── types/
│   │   └── index.tsx
│   └── posts/
│       ├── components/
│       ├── hooks/
│       ├── types/
│       └── index.tsx
├── components/  # Shared components
├── hooks/       # Shared hooks
└── types/       # Shared types

Component Co-location

features/posts/
├── components/
│   ├── PostCard.tsx
│   ├── PostList.tsx
│   └── PostForm.tsx
├── hooks/
│   ├── usePost.ts
│   └── usePosts.ts
├── types/
│   └── post.ts
└── index.tsx  # Public API

---

Common Mistakes to Avoid

1. Conditional Hooks

// ❌ Never do this
function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // Breaks rules of hooks
  }
}

// ✅ Do this
function Component({ condition }) {
  const [state, setState] = useState(0);
  // Use state conditionally, not the hook
}

2. Missing Dependencies

// ❌ Bad: Missing dependency
useEffect(() => {
  fetchUser(userId);
}, []); // userId should be in deps

// ✅ Good: All dependencies listed
useEffect(() => {
  fetchUser(userId);
}, [userId]);

3. Mutating State

// ❌ Bad: Mutating state directly
const handleAdd = () => {
  items.push(newItem); // Don't mutate
  setItems(items);
};

// ✅ Good: Create new array
const handleAdd = () => {
  setItems([...items, newItem]);
};

---

Additional Resources

For more detailed patterns, see:

• [component-patterns.md](resources/component-patterns.md) - Advanced component patterns
• [performance.md](resources/performance.md) - Performance optimization techniques
• [typescript-patterns.md](resources/typescript-patterns.md) - TypeScript best practices
• [hooks-patterns.md](resources/hooks-patterns.md) - Custom hooks and advanced patterns

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: blencorp
• Source: blencorp/claude-code-kit
• License: MIT

Install and usage instructions live in the source repository linked above.