react-19

Provide React 19 best practices with React Compiler and Server Components.

Updated Mar 12, 2026

Search Tags:#react #compiler #server components #actions #react 19 #use hook

Ready to run

npx skills add https://github.com/fwdarth/agent-teams-lite-domainaware --skill react-19-fwdarth

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/fwdarth/agent-teams-lite-domainaware/tree/main/.opencode/skills/react-19
Command: npx skills add https://github.com/fwdarth/agent-teams-lite-domainaware --skill react-19-fwdarth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses common pitfalls and outdated patterns in React development, guiding users towards more efficient and maintainable code with React 19 and the React Compiler.

Core Features & Use Cases

Automatic Optimization: Leverage React Compiler to eliminate the need for manual useMemo and useCallback.
Modern Import Standards: Enforces named imports for better tree-shaking and clarity.
Server Components First: Promotes the use of Server Components by default, with clear guidance on when to opt into Client Components.
use() Hook: Demonstrates the usage of the use() hook for handling promises and conditional context.
Actions & useActionState: Provides examples for server actions and managing pending states.
Simplified Refs: Shows how ref can be passed as a direct prop, removing the need for forwardRef.

Quick Start

Use the react-19 skill to refactor a React component to remove manual memoization.

Frequently Asked Questions about react-19

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How does the React Compiler handle useMemo and useCallback in React 19?▼

The React Compiler automatically optimizes component rendering, eliminating the need for manual useMemo and useCallback hooks in React 19 development. It allows developers to write standard JavaScript code while the compiler manages performance optimizations internally.

How do I pass a ref directly to a child component without forwardRef?▼

You can pass a ref as a direct prop to child components in React 19. This simplified ref handling pattern removes the need for the forwardRef wrapper, streamlining component composition and reducing boilerplate.

What is the best way to handle asynchronous data fetching with the use() hook?▼

Use the use() hook by passing a promise directly to it within your component to handle asynchronous data fetching. The use() hook manages promise resolution and allows for conditional context handling alongside the asynchronous data stream.

When should I opt into Client Components instead of using Server Components by default?▼

You should opt into Client Components in React 19 when your component requires interactivity, state management, or browser-specific APIs. Server Components are used by default for data fetching and static rendering, reserving Client Components for interactive UI elements.

How do I manage pending states with server actions and useActionState?▼

Manage pending states by using the useActionState hook to track the form submission lifecycle with server actions. This pattern provides examples for server actions and automatically manages the pending state while the asynchronous server action executes.

Why use named imports for modern import conventions in React?▼

Named imports are enforced for modern import conventions in React 19 to ensure better tree-shaking and code clarity. This practice helps bundlers eliminate unused code more effectively, reducing the final bundle size of your application.