React 19.2 features - use(), useOptimistic, useActionState, useEffectEvent, Activity component, React Compiler. Use when implementing React 19 patterns.
From fuse-reactnpx claudepluginhub fusengine/agents --plugin fuse-reactThis skill uses the workspace's default tool permissions.
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.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
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>