home / skills / gentleman-programming / gentleman-skills / react-19
This skill guides React 19 development with automatic optimization, server components-first approach, and correct imports to simplify code.
npx playbooks add skill gentleman-programming/gentleman-skills --skill react-19Review the files below or copy the command above to add this skill to your agents.
---
name: react-19
description: >
React 19 patterns with React Compiler.
Trigger: When writing React components - no useMemo/useCallback needed.
license: Apache-2.0
metadata:
author: gentleman-programming
version: "1.0"
---
## No Manual Memoization (REQUIRED)
```typescript
// ✅ React Compiler handles optimization automatically
function Component({ items }) {
const filtered = items.filter(x => x.active);
const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));
const handleClick = (id) => {
console.log(id);
};
return <List items={sorted} onClick={handleClick} />;
}
// ❌ NEVER: Manual memoization
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);
```
## Imports (REQUIRED)
```typescript
// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";
// ❌ NEVER
import React from "react";
import * as React from "react";
```
## Server Components First
```typescript
// ✅ Server Component (default) - no directive
export default async function Page() {
const data = await fetchData();
return <ClientComponent data={data} />;
}
// ✅ Client Component - only when needed
"use client";
export function Interactive() {
const [state, setState] = useState(false);
return <button onClick={() => setState(!state)}>Toggle</button>;
}
```
## When to use "use client"
- useState, useEffect, useRef, useContext
- Event handlers (onClick, onChange)
- Browser APIs (window, localStorage)
## use() Hook
```typescript
import { use } from "react";
// Read promises (suspends until resolved)
function Comments({ promise }) {
const comments = use(promise);
return comments.map(c => <div key={c.id}>{c.text}</div>);
}
// Conditional context (not possible with useContext!)
function Theme({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext);
return <div style={{ color: theme.primary }}>Themed</div>;
}
return <div>Plain</div>;
}
```
## Actions & useActionState
```typescript
"use server";
async function submitForm(formData: FormData) {
await saveToDatabase(formData);
revalidatePath("/");
}
// With pending state
import { useActionState } from "react";
function Form() {
const [state, action, isPending] = useActionState(submitForm, null);
return (
<form action={action}>
<button disabled={isPending}>
{isPending ? "Saving..." : "Save"}
</button>
</form>
);
}
```
## ref as Prop (No forwardRef)
```typescript
// ✅ React 19: ref is just a prop
function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// ❌ Old way (unnecessary now)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);
```
## Keywords
react, react 19, compiler, useMemo, useCallback, server components, use hook
This skill documents React 19 patterns and the React Compiler mindset for writing components without manual memoization. It focuses on practical conventions: prefer server components, use the new use() and action APIs, treat ref as a normal prop, and import React functions by name. The guidance helps you write simpler, faster components that rely on the compiler for optimization.
The skill explains what to avoid and what to adopt under React 19: do not wrap values and handlers in useMemo/useCallback because the compiler optimizes them automatically. It shows when to write server components by default and how to opt into client behavior with "use client" only when state, effects, refs, context, or browser APIs are required. It also demonstrates use() for reading promises and conditional context, and server actions with useActionState for pending UI.
Why should I stop using useMemo and useCallback?
React 19's compiler performs optimization automatically, so manual memoization is usually unnecessary and adds complexity.
When exactly do I add "use client"?
Add it when you need client-only capabilities: local state, effects, refs, context, event handlers, or direct browser APIs.