Help us improve
Share bugs, ideas, or general feedback.
From fuse-react
React 19.2 features - use(), useOptimistic, useActionState, useEffectEvent, Activity component, React Compiler. Use when implementing React 19 patterns.
npx claudepluginhub fusengine/agents --plugin fuse-reactHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-react:react-19The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before ANY implementation, use `TeamCreate` to spawn 3 agents:
references/actions-api.mdreferences/activity-component.mdreferences/context-improvements.mdreferences/custom-hooks-patterns.mdreferences/document-metadata.mdreferences/hooks-improved.mdreferences/lazy-loading.mdreferences/migration-18-19.mdreferences/new-hooks.mdreferences/profiling.mdreferences/react-compiler.mdreferences/ref-as-prop.mdreferences/resource-loading.mdreferences/suspense-patterns.mdreferences/templates/action-form.mdreferences/templates/activity-tabs.mdreferences/templates/custom-hooks.mdreferences/templates/document-metadata.mdreferences/templates/effect-patterns.mdreferences/templates/error-boundary.mdCovers React 19 patterns: use() hook, Server Components, Actions, useActionState, useOptimistic, and component composition for modern React apps.
Generates React 19 patterns for Server Components, Server Actions, useOptimistic, useActionState, useTransition, Suspense boundaries, and TypeScript in Next.js App Router apps. Useful for optimistic UI, concurrent rendering, and performance optimization.
Delivers React 19 patterns for Server Components, Actions, useOptimistic, useFormStatus, Suspense, concurrent features, React Compiler, and TypeScript components/forms. Use for modern React development.
Share bugs, ideas, or general feedback.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Hook | Purpose | Guide |
|---|---|---|
use() | Read promises/context in render | references/new-hooks.md |
useOptimistic | Optimistic UI updates | references/new-hooks.md |
useActionState | Form action state management | references/new-hooks.md |
useFormStatus | Form pending state (child components) | references/new-hooks.md |
useEffectEvent | Non-reactive callbacks in effects | references/new-hooks.md |
→ See references/new-hooks.md for detailed usage
| Hook | Purpose | Guide |
|---|---|---|
useState | Local component state | references/use-state.md |
→ For global state, see react-state skill
| Hook | Purpose | Guide |
|---|---|---|
useEffect | Side effects after paint | references/use-effect.md |
useLayoutEffect | Sync DOM before paint | references/use-layout-effect.md |
| Hook | Purpose | Guide |
|---|---|---|
useRef | DOM access, mutable values | references/use-ref.md |
useImperativeHandle | Customize ref API | references/use-imperative-handle.md |
| Hook | Purpose | Guide |
|---|---|---|
useMemo | Memoize expensive values | references/use-memo.md |
useCallback | Memoize functions | references/use-callback.md |
→ React Compiler handles most memoization automatically
| Hook | Purpose | Guide |
|---|---|---|
useId | Unique IDs for accessibility | references/use-id.md |
useSyncExternalStore | External store subscription | references/use-sync-external-store.md |
→ See references/custom-hooks-patterns.md for patterns
→ See references/templates/custom-hooks.md for implementations
Hide/show components while preserving state:
<Activity mode={isActive ? 'visible' : 'hidden'}>
<TabContent />
</Activity>
→ See references/activity-component.md for patterns
Automatic memoization - useMemo/useCallback mostly obsolete:
→ See references/react-compiler.md for details
// Read promise in render (with Suspense)
const data = use(dataPromise)
// Read context conditionally (unique to use())
if (condition) {
const theme = use(ThemeContext)
}
→ See references/templates/use-promise.md
const [optimisticValue, setOptimistic] = useOptimistic(actualValue)
// Update UI immediately, server updates later
→ See references/templates/optimistic-update.md
const [state, action, isPending] = useActionState(asyncFn, initialState)
→ See references/templates/action-form.md
const onEvent = useEffectEvent(() => {
// Always has fresh props/state, doesn't trigger re-run
})
useEffect(() => {
connection.on('event', onEvent)
}, []) // No need to add onEvent to deps
→ See references/new-hooks.md
| Change | Migration |
|---|---|
ref is a prop | Remove forwardRef wrapper |
Context is provider | Use <Context value={}> directly |
useFormStatus | Import from react-dom |
→ See references/migration-18-19.md
use() + Suspense, NOT useEffectuseOptimistic for instant feedback<Activity> to preserve stateuseEffectEvent for non-reactive callbacks| Template | Use Case |
|---|---|
templates/action-form.md | Form with useActionState |
templates/optimistic-update.md | useOptimistic pattern |
templates/activity-tabs.md | Activity component tabs |
templates/use-promise.md | use() with promises |
| Template | Use Case |
|---|---|
templates/state-patterns.md | useState patterns |
templates/effect-patterns.md | useEffect patterns |
templates/ref-patterns.md | useRef patterns |
templates/custom-hooks.md | Custom hooks implementations |
templates/external-store.md | useSyncExternalStore patterns |
| Template | Use Case |
|---|---|
templates/virtual-list.md | TanStack Virtual for long lists |
templates/lazy-components.md | Code splitting and lazy loading |
templates/profiling-devtools.md | React DevTools Profiler |
Render only visible items for large lists (100+ items).
→ See references/virtualization.md
Code split routes and heavy components for smaller bundles.
→ See references/lazy-loading.md
Measure render performance with DevTools Profiler.
→ See references/profiling.md
Note: With React Compiler (19.1+), manual memo/useMemo/useCallback optimizations are mostly obsolete. Profile first to verify if optimization is needed.
useEffect for data fetching → use use() + SuspenseforwardRef → use ref as prop<Context.Provider> → use <Context value={}><Activity>