# React Docs

> |

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

## Install

```sh
agentstack add skill-pledgeandgrow-pledge-skills-react
```

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

## About

# React Expert (v19.x)

**Official Documentation:** https://react.dev/reference

## Quick Reference

| Topic | File |
|-------|------|
| State hooks: `useState`, `useReducer` | `state-hooks.md` |
| Effect hooks: `useEffect`, `useLayoutEffect`, `useInsertionEffect` | `effect-hooks.md` |
| Context: `createContext`, `useContext`, Provider pattern | `context.md` |
| Ref hooks: `useRef`, `useImperativeHandle` | `ref-hooks.md` |
| Performance: `useMemo`, `useCallback`, `memo`, `PureComponent` | `performance.md` |
| Concurrent features: `useTransition`, `useDeferredValue`, `useActionState`, `useOptimistic` | `concurrent-features.md` |
| Other hooks: `useId`, `useSyncExternalStore`, `useDebugValue`, `use` | `other-hooks.md` |
| Suspense, `lazy`, streaming | `suspense.md` |
| Built-in components: `Fragment`, `StrictMode`, `Profiler`, `Suspense` | `components.md` |
| Forms: Actions, `useFormStatus`, progressive enhancement | `forms.md` |
| React 19 new features | `react-19.md` |
| Rules of React: purity, hooks rules, ESLint | `rules-of-react.md` |
| Advanced patterns: compound, render props, HOCs, custom hooks | `advanced-patterns.md` |
| React DOM: `createRoot`, hydration, portals, `flushSync` | `react-dom.md` |

## Core Philosophy

React is a **declarative UI library** built on three principles:

1. **Components** — Independent, reusable pieces of UI
2. **Props** — Read-only data flow from parent to child
3. **State** — Mutable data that triggers re-renders when changed

## Component Types

```tsx
// Function Component (recommended)
function Greeting({ name }: { name: string }) {
  return Hello, {name}
}

// With state
function Counter() {
  const [count, setCount] = useState(0)
  return  setCount(c => c + 1)}>{count}
}
```

## Component Lifecycle

```
Mount → Render → Commit → (State Change → Re-render → Commit) → Unmount
        ↑                                          ↑
    useEffect (after paint)              useEffect cleanup → new effect
    useLayoutEffect (before paint)
```

## Hooks Rules

1. **Only call hooks at the top level** — not inside loops, conditions, or nested functions
2. **Only call hooks from React functions** — components or custom hooks
3. **Components and hooks must be pure** — same inputs → same outputs, no side effects during render

```tsx
// ✅ Correct
function Component() {
  const [state, setState] = useState(0)
  useEffect(() => { /* ... */ }, [])
  return 
}

// ❌ Wrong — hooks inside condition
function Component() {
  if (condition) {
    useEffect(() => {})  // ❌
  }
}

// ❌ Wrong — hooks after return
function Component() {
  const [state] = useState(0)
  if (!state) return null
  useEffect(() => {})  // ❌ — not always called
}
```

## Installation

```bash
# Modern React app (Vite)
npm create vite@latest my-app -- --template react-ts

# Next.js (includes React 19)
npx create-next-app@latest

# React only
npm install react react-dom
npm install -D @types/react @types/react-dom
```

## React 19 Quick Syntax

```tsx
// Ref as prop (no forwardRef needed)
function Input({ ref, ...props }: { ref?: React.Ref }) {
  return 
}

// Context as provider
...

// Actions with useActionState
function Form() {
  const [state, submitAction, isPending] = useActionState(async (prev, formData) => {
    await saveData(formData)
    return { success: true }
  }, null)
}

// use() API — read promises in render
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise)  // Suspends until resolved
  return comments.map(c => {c.text})
}

// Document metadata anywhere
function BlogPost({ title }) {
  return (
    <>
      {title}
      
      ...
    
  )
}
```

## Source & license

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

- **Author:** [pledgeandgrow](https://github.com/pledgeandgrow)
- **Source:** [pledgeandgrow/pledge-skills](https://github.com/pledgeandgrow/pledge-skills)
- **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-pledgeandgrow-pledge-skills-react
- Seller: https://agentstack.voostack.com/s/pledgeandgrow
- 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%.