React 19

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

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

// ✅ Client Component - only when needed
"use client";
export function Interactive() {
  const [state, setState] = useState(false);
  return  setState(!state)}>Toggle;
}

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 => {c.text});
}

// Conditional context (not possible with useContext!)
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return Themed;
  }
  return Plain;
}

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 (
    
      
        {isPending ? "Saving..." : "Save"}
      
    
  );
}

ref as Prop (No forwardRef)

// ✅ React 19: ref is just a prop
function Input({ ref, ...props }) {
  return ;
}

// ❌ Old way (unnecessary now)
const Input = forwardRef((props, ref) => );

Keywords

react, react 19, compiler, useMemo, useCallback, server components, use hook

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Gentleman-Programming
• Source: Gentleman-Programming/Gentleman-Skills
• License: MIT

Install and usage instructions live in the source repository linked above.