react-19

tirtza-weinfeld's avatarfrom tirtza-weinfeld

React 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides expert-level guidance and implementation patterns for React 19.3+, focusing on modernizing web development workflows. It streamlines the adoption of cutting-edge features like Server Actions, the use() hook for async data, and the React Compiler, ensuring codebases are performant, maintainable, and aligned with the latest industry standards for front-end architecture.

Use Cases

  • Modernizing Form Logic: Transitioning from manual useState and onChange patterns to useActionState and useFormStatus for more robust, less verbose form handling and state management.
  • Efficient Async Data Handling: Implementing the use() hook to seamlessly unwrap promises and handle context, simplifying data flow between Server and Client components while reducing boilerplate.
  • Performance Optimization: Leveraging the React Compiler to eliminate manual memoization (useMemo/useCallback) and utilizing the Activity component for advanced pre-rendering capabilities.
  • Enhanced User Experience: Utilizing the ViewTransition API and useOptimistic hook to create fluid, responsive interfaces with immediate visual feedback during background data mutations.
  • Metadata and SEO Management: Implementing built-in support for hoisting titles, meta tags, and links to the document head directly within components.
namereact-19
descriptionReact 19.3+ patterns. Use for forms, async data, pre-rendering, transitions, refs, context, metadata.

React 19.3+

Avoid → Use

  • useState + onChange for forms → useActionState → examples/form-action.tsx
  • await in server components → pass promise, use() in client → examples/use-server-promise.tsx
  • forwardRef → ref as prop
  • useCallback / useMemo → compiler handles it
  • useContext → use(Context)
  • Context.Provider → <Context value={}>
  • Manual state reset on prop change → key prop

Patterns

  • Forms: useActionState(fn, init) + useOptimistic + useFormStatus → examples/form-action.tsx
  • Pre-rendering: <Activity mode="hidden"> → examples/activity-prerender.tsx
  • Effect events: useEffectEvent() for non-reactive logic in effects → examples/effect-event.tsx
  • Async data: pass promise from server, unwrap with use() → examples/use-server-promise.tsx
  • ViewTransition: wrap elements, use startTransition() + addTransitionType() → examples/view-transition.tsx
  • Mutations outside forms: useTransition + Server Action → examples/server-action-mutation.tsx
  • Suspense: <Suspense fallback={...}> wraps async components
  • Deferred value: useDeferredValue(value, initialValue)
  • Request memoization: cache(async fn) with cacheSignal()
  • Server Action: "use server" + revalidatePath() / revalidateTag()
  • Metadata: <title>, <meta>, <link> hoisted to <head>
  • Refs: ref as prop, cleanup via return function

Component structure

  • One component per file
  • Inner functions use arrow syntax: const handleX = () => {}