React 19

Build modern React 19 apps with React Compiler optimization patterns

✨ The solution you've been looking for

Verified

Tested and verified by our team

12565 Stars

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-15.

react-19 react-compiler frontend typescript server-components hooks optimization tsx

Repository

See It In Action

Interactive preview & real-world examples

Live Demo

AI Conversation Simulator

See how users interact with this skill

User Prompt

Create a React 19 component that filters and sorts a list of products with click handlers

Skill Processing

Analyzing request...

Agent Response

Component code that follows React Compiler patterns with automatic optimization, avoiding useMemo and useCallback

Quick Start (3 Steps)

Get up and running in minutes

Install

claude-code skill install react-19

claude-code skill install react-19

Config

First Trigger

@react-19 help

Commands

Command	Description	Required Args
@react-19 optimized-component-development	Build React 19 components that automatically benefit from React Compiler optimizations without manual memoization	None
@react-19 server-first-architecture	Structure applications with Server Components as default and Client Components only when needed	None
@react-19 modern-hook-patterns	Implement React 19's new use() hook and useActionState for async operations and form handling	None

Typical Use Cases

Optimized Component Development

Build React 19 components that automatically benefit from React Compiler optimizations without manual memoization

Server-First Architecture

Structure applications with Server Components as default and Client Components only when needed

Modern Hook Patterns

Implement React 19's new use() hook and useActionState for async operations and form handling

Overview

No Manual Memoization (REQUIRED)

 1// ✅ React Compiler handles optimization automatically
 2function Component({ items }) {
 3  const filtered = items.filter(x => x.active);
 4  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));
 5
 6  const handleClick = (id) => {
 7    console.log(id);
 8  };
 9
10  return <List items={sorted} onClick={handleClick} />;
11}
12
13// ❌ NEVER: Manual memoization
14const filtered = useMemo(() => items.filter(x => x.active), [items]);
15const handleClick = useCallback((id) => console.log(id), []);

Imports (REQUIRED)

1// ✅ ALWAYS: Named imports
2import { useState, useEffect, useRef } from "react";
3
4// ❌ NEVER
5import React from "react";
6import * as React from "react";

Server Components First

 1// ✅ Server Component (default) - no directive
 2export default async function Page() {
 3  const data = await fetchData();
 4  return <ClientComponent data={data} />;
 5}
 6
 7// ✅ Client Component - only when needed
 8"use client";
 9export function Interactive() {
10  const [state, setState] = useState(false);
11  return <button onClick={() => setState(!state)}>Toggle</button>;
12}

When to use “use client”

useState, useEffect, useRef, useContext
Event handlers (onClick, onChange)
Browser APIs (window, localStorage)

use() Hook

 1import { use } from "react";
 2
 3// Read promises (suspends until resolved)
 4function Comments({ promise }) {
 5  const comments = use(promise);
 6  return comments.map(c => <div key={c.id}>{c.text}</div>);
 7}
 8
 9// Conditional context (not possible with useContext!)
10function Theme({ showTheme }) {
11  if (showTheme) {
12    const theme = use(ThemeContext);
13    return <div style={{ color: theme.primary }}>Themed</div>;
14  }
15  return <div>Plain</div>;
16}

Actions & useActionState

 1"use server";
 2async function submitForm(formData: FormData) {
 3  await saveToDatabase(formData);
 4  revalidatePath("/");
 5}
 6
 7// With pending state
 8import { useActionState } from "react";
 9
10function Form() {
11  const [state, action, isPending] = useActionState(submitForm, null);
12  return (
13    <form action={action}>
14      <button disabled={isPending}>
15        {isPending ? "Saving..." : "Save"}
16      </button>
17    </form>
18  );
19}

ref as Prop (No forwardRef)

1// ✅ React 19: ref is just a prop
2function Input({ ref, ...props }) {
3  return <input ref={ref} {...props} />;
4}
5
6// ❌ Old way (unnecessary now)
7const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);