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.
npxskills add prowler-cloud/prowler--skill react-19Loading…
// ✅ 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), []);
// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";
// ❌ NEVER
import React from "react";
import * as React from "react";
// ✅ 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>;
}
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>;
}
"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>
);
}
// ✅ 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} />);
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).