react-19

Enforce React 19 patterns for server and client component design.

Updated Mar 15, 2026
One-click install
npx skills add https://github.com/sebasmzg/sebas.dot --skill react-19-sebasmzg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/sebasmzg/sebas.dot/tree/main/.config/opencode/skill/react-19
Command: npx skills add https://github.com/sebasmzg/sebas.dot --skill react-19-sebasmzg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Traditional React component optimization often leads to manual memoization and boilerplate. React 19 patterns reduce boilerplate by promoting compiler-managed optimizations.

Core Features & Use Cases

  • Server Components First: Guidance on server vs client boundaries, enabling optimal rendering.
  • Correct Imports: Encourages named imports for hooks and avoids legacy patterns.
  • Ref Handling: Demonstrates ref-as-prop pattern and avoiding unnecessary forwardRef usage.
  • use() and useActionState: Introduces modern patterns for data fetching and server actions.

Quick Start

Apply React 19 patterns to your components and avoid manual memoization.

Frequently Asked Questions about react-19

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

FAQPage Schema
How does React 19 compiler auto-optimization reduce manual memoization?

React 19 compiler auto-optimization reduces manual memoization by automatically managing component re-renders, eliminating the need for useMemo and useCallback boilerplate while enforcing modern patterns for optimal rendering performance.

When do I need to use Server Components versus client boundaries in React 19?

Server Components in React 19 are used first by default to enable optimal rendering, while client boundaries using the use client directive are applied specifically when client-side interactivity is required for component functionality.

How do I handle refs in React 19 without using forwardRef?

React 19 handles refs using the ref-as-prop pattern directly on components, avoiding unnecessary forwardRef usage and simplifying component APIs while adhering to modern compiler guidelines for ref management.

What is the best way to fetch data and handle server actions in React 19?

The best way to fetch data and handle server actions in React 19 is using the use() hook for data fetching and useActionState for server actions, applying correct named imports for these modern hooks.

Does React 19 server components architecture work with legacy import patterns?

React 19 server components architecture does not work with legacy import patterns; it encourages named imports for hooks and enforces modern patterns to ensure correct server versus client usage and proper compiler optimization.