react-19

Standardize React 19 .tsx components and hooks with React Compiler patterns.

Updated May 17, 2026
One-click install
npx skills add https://github.com/cheetah-alo/NegritaOS --skill react-19-cheetah-alo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/cheetah-alo/NegritaOS/tree/main/.codex/skills/react-19
Command: npx skills add https://github.com/cheetah-alo/NegritaOS --skill react-19-cheetah-alo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents performance regressions and architectural mistakes by enforcing React 19 patterns that align with the React Compiler, correct Server/Client boundaries, and modern hook usage.

Core Features & Use Cases

  • No manual memoization: Enforces avoiding useMemo/useCallback when the React Compiler can optimize automatically, reducing accidental bugs and over-engineering.
  • Correct import and component structure: Standardizes named React imports and avoids default/namespace React imports that conflict with modern patterns.
  • Server Components first: Guides whether components should be Server or Client and when to use "use client" for interactivity, hooks, and browser APIs.
  • Advanced primitives: Covers using the use() hook for promise/suspense-like reads, and using Actions with useActionState for server-driven forms and pending UI.
  • Modern ref handling: Recommends treating ref as a prop instead of relying on forwardRef unnecessarily.

Quick Start

Use the react-19 skill when you are creating a React 19 .tsx component or hook and want the code to follow React Compiler-friendly patterns, correct Server/Client usage, and modern actions and refs.

Frequently Asked Questions about react-19

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

FAQPage Schema
Do I still need useMemo and useCallback for React 19 components?▼

No, you do not need useMemo and useCallback for React 19 components. The React Compiler handles automatic optimization, so manual memoization is unnecessary and discouraged to prevent accidental bugs and over-engineering.

How do I handle server form submissions and pending UI in React 19?▼

Handle server form submissions and pending UI in React 19 by using Actions with the useActionState hook. This pattern standardizes server-driven forms and correctly tracks the pending state during server interactions.

Should I use forwardRef or pass ref as a prop in React 19?▼

You should pass ref as a prop in React 19 instead of using forwardRef. Treating ref as a standard prop is the modern pattern recommended to avoid unnecessary forwardRef usage and simplify component architecture.

When should I add the use client directive in a Next.js App Router project?▼

Add the use client directive in a Next.js App Router project only when a component requires interactivity, client-side hooks, or browser APIs. Server Components should be the default to maintain correct boundaries.

How do I read promises in React 19 Server Components?▼

Read promises in React 19 by using the use() hook for promise and suspense-like reads. This advanced primitive allows you to unwrap and access resolved promise values directly within your component tree.

What import structure does React 19 require for components?▼

React 19 requires named React imports for components. Standardizing named imports avoids default and namespace React imports that conflict with modern React Compiler patterns and architectural standards.