# React Best Practices

> React component patterns, hooks, state management, and performance best practices. Use when building or reviewing React components.

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

## Install

```sh
agentstack add skill-sabahattink-antigravity-fullstack-hq-react-best-practices
```

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

## About

# React Best Practices

## Component Patterns

### Functional Components Only

```typescript
// ✅ Correct
interface UserCardProps {
  user: User
  onSelect: (id: string) => void
}

export const UserCard = ({ user, onSelect }: UserCardProps) => {
  return (
     onSelect(user.id)} className="...">
      {user.name}
    
  )
}

// ❌ Never use class components
class UserCard extends React.Component {}
```

### Composition Over Props Drilling

```typescript
// ✅ Use composition
export const Layout = ({ children }: { children: React.ReactNode }) => (
  {children}
)

// ✅ Use context for deep data
const ThemeContext = createContext(null)
export const useTheme = () => {
  const theme = useContext(ThemeContext)
  if (!theme) throw new Error('useTheme must be used within ThemeProvider')
  return theme
}
```

## Hooks

### Custom Hooks

```typescript
// ✅ Extract reusable logic into hooks
const useLocalStorage = (key: string, initial: T) => {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key)
      return item ? JSON.parse(item) : initial
    } catch {
      return initial
    }
  })

  const set = (val: T) => {
    setValue(val)
    localStorage.setItem(key, JSON.stringify(val))
  }

  return [value, set] as const
}
```

### useEffect Rules

```typescript
// ✅ Correct — explicit dependencies
useEffect(() => {
  fetchUser(userId)
}, [userId])

// ✅ Cleanup when needed
useEffect(() => {
  const sub = subscribe(channel)
  return () => sub.unsubscribe()
}, [channel])

// ❌ Never ignore the dependency array
useEffect(() => {
  fetchUser(userId)
}) // runs on every render
```

## Performance

### Memoization

```typescript
// ✅ Memoize expensive computations
const sorted = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
)

// ✅ Stable callback references
const handleClick = useCallback((id: string) => {
  onSelect(id)
}, [onSelect])

// ✅ Prevent unnecessary re-renders
export const HeavyList = memo(({ items }: { items: Item[] }) => (
  {items.map(item => {item.name})}
))
```

### Code Splitting

```typescript
// ✅ Lazy load heavy components
const Dashboard = lazy(() => import('./Dashboard'))

export const App = () => (
  }>
    
  
)
```

## Error Handling

```typescript
// ✅ Error boundaries for UI errors
export class ErrorBoundary extends React.Component {
  state = { hasError: false }
  static getDerivedStateFromError() { return { hasError: true } }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children
  }
}
```

## Forbidden Patterns

- Class components (use functional)
- `any` types on props
- Mutating state directly
- Missing `key` props in lists
- Ignoring cleanup in `useEffect`
- `useEffect` for derived state (use `useMemo`)

## Source & license

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

- **Author:** [sabahattink](https://github.com/sabahattink)
- **Source:** [sabahattink/antigravity-fullstack-hq](https://github.com/sabahattink/antigravity-fullstack-hq)
- **License:** MIT
- **Homepage:** https://github.com/sabahattink/antigravity-fullstack-hq

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-sabahattink-antigravity-fullstack-hq-react-best-practices
- Seller: https://agentstack.voostack.com/s/sabahattink
- 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%.