react-19

Guide React 19 implementation with React Compiler, modern hooks, and Server Components.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/kim-yeo-appweb-lab/trend-korea-app --skill react-19-kim-yeo-appweb-lab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-19
Source: https://github.com/kim-yeo-appweb-lab/trend-korea-app/tree/main/.claude/skills/react-19
Command: npx skills add https://github.com/kim-yeo-appweb-lab/trend-korea-app --skill react-19-kim-yeo-appweb-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers adopt modern React 19 best practices, leveraging the React Compiler for automatic optimizations and simplifying component development.

Core Features & Use Cases

  • Automatic Optimization: Eliminates the need for manual memoization (useMemo, useCallback) as the React Compiler handles it.
  • Modern Hook Usage: Demonstrates correct usage of new hooks like use() for promises and context, and useActionState for form handling.
  • Server Components: Guides on differentiating between Server and Client Components in Next.js.
  • Ref as Prop: Shows the simplified way to pass refs directly as props in React 19.
  • Use Case: When building a new feature with React 19, ensure your components are optimized by default and utilize the latest React APIs correctly.

Quick Start

Write a React 19 component using named imports for hooks and passing refs as props.

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 optimizations?

Yes, the React Compiler automatically handles memoization, eliminating the need for manual `useMemo` and `useCallback` hooks. It optimizes components by default, simplifying development and ensuring efficient re-renders without manual intervention.

What is the correct way to use the use() hook in React 19?

The `use()` hook in React 19 allows you to read promises and context directly. Modern hook usage demonstrates reading values within components, simplifying asynchronous data fetching and context consumption.

How do I pass ref as a prop in React 19 instead of using forwardRef?

React 19 allows passing refs directly as props to components. This simplified `ref` as a prop pattern removes the need for `forwardRef`, streamlining component APIs and reducing boilerplate.

How do I manage form submissions with useActionState in Next.js App Router?

Use the `useActionState` hook in React 19 for modern form handling within the Next.js App Router. It manages form state and action results, integrating seamlessly with Server Components for submissions.

Do I need to use named imports for hooks in React 19?

Yes, correct import conventions in React 19 emphasize using named imports for hooks. This ensures compatibility with the React Compiler and modern component patterns during development.

How to differentiate between Server and Client Components in Next.js?

Server and Client Components in Next.js App Router are differentiated by their execution environment. Use `'use client'` directives to establish Client Components, while Server Components handle data fetching by default.