# React

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-michelve-hugin-cowork-react`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [michelve](https://agentstack.voostack.com/s/michelve)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [michelve](https://github.com/michelve)
- **Source:** https://github.com/michelve/hugin-cowork/tree/main/skills/react

## Install

```sh
agentstack add skill-michelve-hugin-cowork-react
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```typescript
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

```typescript
// Wrap data-fetching components
}>
  

// Nested Suspense for granular loading
}>
  
  }>
    
  
  

```

### Error Boundaries with Suspense

```typescript
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

```typescript
// 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

```typescript
// 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](https://github.com/michelve)
- **Source:** [michelve/hugin-cowork](https://github.com/michelve/hugin-cowork)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-michelve-hugin-cowork-react
- Seller: https://agentstack.voostack.com/s/michelve
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.