react-19

Standardize React 19 patterns for .tsx components with the React Compiler.

1|Updated Jan 17, 2026
One-click install
npx skills add https://github.com/phar-dev/phardev.dot --skill react-19-phar-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/phar-dev/phardev.dot/tree/main/opencode/.config/opencode/skills/react-19
Command: npx skills add https://github.com/phar-dev/phardev.dot --skill react-19-phar-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates and guides the adoption of React 19 patterns using the React Compiler for .tsx components, reducing boilerplate and preventing integration errors.

Core Features & Use Cases

  • Enforces a server components-first mindset, correct use of "use client" and clear server/client boundaries.
  • Documents recommended memoization, import patterns, hooks usage, and ref semantics for React 19.
  • Applies to creating new components, migrating codebases, and teaching teams about compiler-driven patterns.

Quick Start

Create a new React 19 component file using the React Compiler patterns outlined in this guide.

Frequently Asked Questions about react-19

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

FAQPage Schema
How do I standardize React 19 patterns for .tsx components with the React Compiler?

Standardize React 19 patterns for .tsx components by enforcing React Compiler import rules, memoization practices, and ref semantics. This reduces boilerplate and prevents integration errors when authoring components and hooks.

What is the server components-first approach in React 19 and Next.js 15?

The server components-first approach in React 19 prioritizes server-side rendering by default. It enforces clear server/client boundaries and correct 'use client' directives to optimize Next.js 15 integration scenarios and component sequencing.

How do I use the use hook and useActionState in React 19?

Use the 'use' hook and useActionState in React 19 by following compiler-driven patterns for hook usage. These patterns standardize state management and async operations within your .tsx components without manual memoization boilerplate.

Can I use the React Compiler to migrate existing codebases to React 19?

Yes, you can use the React Compiler to migrate existing codebases to React 19. It guides the adoption of new patterns, enforcing correct ref semantics and memoization practices to reduce boilerplate during component migration.

Does the React Compiler eliminate the need for manual memoization in React 19?

The React Compiler standardizes memoization practices for React 19 components, significantly reducing manual boilerplate. It automatically handles optimization logic, allowing you to author .tsx components without explicit memoization hooks.

What are the limitations of using React Compiler patterns for frontend development?

Limitations include strict adherence to enforced import patterns, server/client boundaries, and 'use client' rules. Deviating from these compiler-driven patterns may cause integration errors or break the expected ref semantics in React 19.