React 19 Cheat Sheet
Quick reference guide for React 19: Hooks, Server Components, Server Actions, useActionState, and modern UI patterns.
React is a JavaScript library for building user interfaces based on components. React 19 introduces native Server Components, Server Actions, compiler-backed optimizations, and new hooks like useActionState and use.
Essential Hooks Reference
Hooks let you use state and other React features inside functional components.
| Hook | Primary Purpose | Basic Syntax Example |
|---|---|---|
useState | Local reactive state | const [count, setCount] = useState(0) |
useEffect | Synchronize with external systems | useEffect(() => { subscribe(); return () => unsubscribe(); }, [dep]) |
useContext | Read context values | const theme = useContext(ThemeContext) |
useRef | Mutable reference (no re-render) | const inputRef = useRef<HTMLInputElement>(null) |
useMemo | Cache calculation results | const cachedVal = useMemo(() => compute(a, b), [a, b]) |
useCallback | Cache function definitions | const handleClick = useCallback(() => doThing(id), [id]) |
useActionState | Handle async form state (React 19) | const [state, formAction, isPending] = useActionState(fn, initialState) |
use | Read Promise / Context directly | const data = use(dataPromise) |
State and Event Handling
import { useState, ChangeEvent, FormEvent } from "react";
export function UserForm() {
const [name, setName] = useState<string>("");
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
};
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log("Submitted:", name);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
}
React 19 Server Actions & Form State
React 19 natively supports Server Actions for form submissions and async updates.
"use client";
import { useActionState } from "react";
import { updateProfile } from "./actions";
export function ProfileEditor() {
const [state, formAction, isPending] = useActionState(updateProfile, { error: null });
return (
<form action={formAction}>
<input name="username" defaultValue="john" />
<button type="submit" disabled={isPending}>
{isPending ? "Saving..." : "Save Profile"}
</button>
{state.error && <p className="error">{state.error}</p>}
</form>
);
}
Reading Promises with `use()`
The use API reads the value of a resource like a Promise or Context in render.
import { use, Suspense } from "react";
function UserProfile({ userPromise }: { userPromise: Promise<{ name: string }> }) {
const user = use(userPromise);
return <h2>Hello, {user.name}</h2>;
}
export function ProfilePage({ userPromise }: { userPromise: Promise<{ name: string }> }) {
return (
<Suspense fallback={<p>Loading user...</p>}>
<UserProfile userPromise={userPromise} />
</Suspense>
);
}
Common Pitfalls & Tips
[!WARNING] Do not invoke Hooks inside loops, conditions, or nested functions. Always call Hooks at the top level of your React function.
[!TIP] In React 19,
refis passed as a standard prop to function components;forwardRefis no longer strictly required for basic prop forwarding.