React

React Core Patterns

When to Use

• Creating React components
• Working with hooks (useState, useEffect, custom hooks)
• Implementing Suspense boundaries
• Setting up lazy loading with React.lazy
• Using React 19 patterns (ref as prop, no forwardRef)
• Structuring component files
• Optimizing component performance

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
• [ ] Named export only (no default exports)
• [ ] No conditional hooks (hooks must be called in same order)
• [ ] Pass ref as a prop (no forwardRef needed in React 19)

---

---

Core Hooks Patterns

See [hooks-patterns.md](references/hooks-patterns.md) for useState, useCallback, useMemo, and useEffect patterns with TypeScript examples.

---

Lazy Loading & Code Splitting

See [lazy-loading.md](examples/lazy-loading.md) for React.lazy, Suspense fallbacks, and feature-based code splitting examples.

---

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

See [typescript-patterns.md](references/typescript-patterns.md) for component props, hooks typing, and custom hook return types.

---

Performance Optimization

See [performance.md](references/performance.md) for React.memo usage, custom comparison functions, and avoiding re-renders.

---

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

See [common-mistakes.md](references/common-mistakes.md) for conditional hooks, missing dependencies, and state mutation anti-patterns.

---

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: michelve
• Source: michelve/hugin-cowork
• License: MIT

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