React Docs

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

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

// ✅ 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

# 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

// 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
• Source: pledgeandgrow/pledge-skills
• License: MIT

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