react-19
React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install gentleman-programming-gentleman-dots-react-19
Repository
Skill path: GentlemanClaude/skills/react-19
React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed.
Open repositoryBest for
Primary workflow: Write Technical Docs.
Technical facets: Full Stack, Frontend, Tech Writer.
Target audience: everyone.
License: Apache-2.0.
Original source
Catalog source: SkillHub Club.
Repository owner: Gentleman-Programming.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install react-19 into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/Gentleman-Programming/Gentleman.Dots before adding react-19 to shared team environments
- Use react-19 for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
---
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