Notre avis
Fournit des modèles pour les composants React 19 utilisant le compilateur React, couvrant la mémorisation automatique, les composants serveur, le hook use(), les actions et la prop ref.
Points forts
- Élimine la mémorisation manuelle grâce au compilateur React.
- Favorise les composants serveur par défaut.
- Introduit de nouveaux hooks comme use() et useActionState pour une gestion asynchrone simplifiée.
- Simplifie le passage de ref sans forwardRef.
Limites
- Nécessite React 19 et la configuration du compilateur React.
- N'est pas rétrocompatible avec les anciennes versions de React.
- Certains modèles comme use() sont encore expérimentaux dans certains environnements.
À utiliser lors de la construction de nouvelles applications React 19 ou de la migration de bases de code existantes pouvant adopter le compilateur React.
À éviter lorsque vous travaillez sur des projets qui ne peuvent pas passer à React 19 ou qui n'ont pas activé le compilateur React.
Analyse de sécurité
SûrThe skill provides React 19 coding patterns and best practices. It does not instruct execution of any commands, tools, or actions that could harm systems or exfiltrate data. The allowed-tools list is standard but the skill itself only recommends code patterns, not system-level operations.
Aucun point d'attention détecté
Exemples
Rewrite this React component to follow React 19 patterns: remove all useMemo and useCallback calls, use named imports, and ensure it's a server component if possible.Update this form component to use the new useActionState hook from React 19 for managing submission state.Remove the forwardRef wrapper from this component and pass ref directly as a prop instead, as per React 19.name: react-19 description: > 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. license: Apache-2.0 metadata: author: Alan version: "1.0" scope: [root, ui] auto_invoke: "Writing React components" allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task
No Manual Memoization (REQUIRED)
// ✅ 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)
// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";
// ❌ NEVER
import React from "react";
import * as React from "react";
Server Components First
// ✅ 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
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
"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)
// ✅ 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} />);
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.