# React

> React Hooks, TypeScript, component patterns, and modern React best practices. Use when writing React components, hooks, context, or using Suspense/ErrorBoundary/Lazy loading.

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

## Install

```sh
agentstack add skill-belos-street-skill-kit-react
```

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

## About

# React

> Based on React 19 with TypeScript. Always use functional components with Hooks.

## Preferences

- Prefer TypeScript over JavaScript
- Prefer functional components over class components
- Prefer composition over inheritance
- Use `useMemo` and `useCallback` judiciously for performance optimization
- Avoid prop drilling with Context or composition

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Hooks | useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useId, useTransition, useDeferredValue, useSyncExternalStore | [hooks](references/hooks.md) |
| Component Patterns | Function components, props, children, composition, render props, forwardRef, memo | [components-patterns](references/components-patterns.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Advanced Features | Suspense, Error Boundary, Lazy loading, Context, Refs, Portals | [advanced-features](references/advanced-features.md) |

## Quick Reference

### Function Component with TypeScript

```tsx
import { useState, useEffect, useCallback, useMemo } from 'react'

interface Props {
  title: string
  count?: number
  onUpdate: (value: string) => void
}

export function MyComponent({ title, count = 0, onUpdate }: Props) {
  const [value, setValue] = useState('')

  const doubled = useMemo(() => count * 2, [count])

  const handleClick = useCallback(() => {
    onUpdate(value)
  }, [onUpdate, value])

  useEffect(() => {
    console.log('Component mounted or count changed:', count)
    return () => console.log('Cleanup')
  }, [count])

  return (
    
      {title} - {doubled}
      Click
    
  )
}
```

### Key Imports

```ts
// State & Refs
import { useState, useRef, useReducer, useId } from 'react'

// Effects & Lifecycle
import { useEffect, useLayoutEffect, useInsertionEffect } from 'react'

// Performance
import { useMemo, useCallback, useTransition, useDeferredValue } from 'react'

// Context & Refs
import { useContext, useRef, forwardRef, useImperativeHandle, useSyncExternalStore } from 'react'

// Components
import { memo, useDeferredValue, Suspense, lazy, createContext, createRef } from 'react'
```

## Source & license

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

- **Author:** [belos-street](https://github.com/belos-street)
- **Source:** [belos-street/skill-kit](https://github.com/belos-street/skill-kit)
- **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-belos-street-skill-kit-react
- Seller: https://agentstack.voostack.com/s/belos-street
- 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%.