web-react

Purpose

This skill provides expertise in React 19 for building dynamic web applications, focusing on advanced features like hooks, context, suspense, server/client components, useActionState, the compiler, and React Query for efficient state management and data handling.

When to Use

• Use for new React projects requiring modern hooks (e.g., useActionState) or server-side rendering with suspense.
• Apply when integrating data fetching with React Query in web apps, especially for real-time updates or API interactions.
• Choose for optimizing performance with server/client components in large-scale applications.
• Employ in scenarios needing context for global state without Redux, or when handling asynchronous operations with suspense.

Key Capabilities

• Hooks: Use useState, useEffect, useContext for local state and side effects; useActionState for form state and actions in React 19.
• Context: Create context providers to share data across components, e.g., for theme or user auth.
• Suspense: Wrap components for lazy loading, like <Suspense fallback={Loading...}> for handling promises.
• Server/Client Components: Differentiate with 'use server' directive for server-only code and client components for interactivity.
• React Query: Manage server state with useQuery for fetching data, and useMutation for updates, caching responses automatically.
• Compiler: Leverage React 19's compiler for automatic optimizations, like bundling and tree-shaking in build tools.
• Additional: Handle forms with useActionState for server actions, reducing client-side JavaScript.