skills.rest
Yoriichi-Dang
Yoriichi-DangCOMMUNITY
Explore all skills by this author →
GitHub

react-19

Standardize React 19 patterns with the React Compiler in Next.js app router contexts.

Updated Dec 26, 2025
Search Tags:#typescript#hooks#react-19#server-components#client-components#react-compiler
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-19-yoriichi-dang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.agents/skills/react-19
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-19-yoriichi-dang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured guide for implementing React 19 patterns using the React Compiler, enabling developers to write efficient React components and leverage server/client component boundaries.

Core Features & Use Cases

  • Server-first patterns: Server components by default with explicit client components using 'use client'.
  • Import discipline: Favor named imports and avoid legacy patterns to align with React Compiler optimizations.
  • Hooks and patterns: Use hooks like use() when working with asynchronous data and server components; manage client-side state with useState in client components.
  • Use Case: Build a Next.js app using server components for data fetching and a client component for interactivity.

Quick Start

  • Create a server component that fetches data and renders UI.
  • Create a client component with use client directive and state management using useState.
  • Ensure imports are named and avoid manual memoization; rely on React Compiler optimizations.

Frequently Asked Questions about react-19

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

FAQPage Schema
How do I structure server and client components in React 19 with the Next.js app router?▼

React 19 uses a server-first approach where components are server components by default. You add the 'use client' directive explicitly only when client-side interactivity or state management is needed.

Do I need manual memoization like useMemo and useCallback with the React Compiler?▼

Manual memoization is unnecessary with the React Compiler. It automatically optimizes rendering, so you should rely on compiler optimizations instead of manually applying useMemo or useCallback hooks.

How does the use() hook work for asynchronous data in React 19 server components?▼

The use() hook handles asynchronous data fetching within React 19 server components. It allows you to read promises directly during rendering, simplifying data retrieval before passing data to client components.

What are the import conventions for React 19 components using the compiler?▼

React 19 with the compiler favors named imports and avoids legacy patterns. This import discipline aligns with compiler optimizations to ensure components are processed efficiently.

Can I manage client-side state in React 19 without breaking server component boundaries?▼

Yes, you manage client-side state using the useState hook within components marked with 'use client'. This keeps server components for data fetching and client components for interactivity.

Related Skills

Explore More Software Engineering Skills→
BrunoAlanBrunoAlan
1

react-19

Implement React 19 patterns with the React Compiler across server and client components.

Community
Advanced
oakossoakoss
14

react-patterns

Guide React 19+ patterns covering hooks, Server Components, and optimization.

Official
Intermediate
Gentleman-ProgrammingGentleman-Programming
618

react-19

Enforce server-components-first React 19 patterns with React Compiler and named imports.

Official
Advanced
crozzbitecrozzbite

react-19

Provide React 19 component patterns using the React Compiler without manual memoization.

Community
Intermediate