React 19

This is a tight set of React 19 patterns that pushes you toward the new mental model: no manual memoization because the compiler handles it, named imports only, ref as a regular prop instead of forwardRef, and the use() hook for promises and conditional context reads. It's opinionated about server components by default and tells you exactly when to reach for "use client". The actions and useActionState examples are clean. If you're migrating from React 18 or want to write idiomatic React 19 without fighting old habits, this saves you from reaching for useMemo and useCallback everywhere.

skills.sh installs: 675
GitHub stars: 15.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add prowler-cloud/prowler --skill react-19 --agent claude-code

Installs into .claude/skills of the current project.

Files

No Manual Memoization (REQUIRED)

Prowler UI enables the React Compiler (reactCompiler: true in ui/next.config.js), so manual memoization is unnecessary.

// ✅ 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} />;
}

SKILL.md on GitHub