React 19 Complete Guide: React Compiler, Server Actions & use() Hook

React 19 introduces automatic memoization through the React Compiler, eliminating boilerplate code while optimizing rendering performance across web applications.

**TL;DR:** React 19 simplifies state and server data mutation by introducing native Server Actions, automated build-time memoization, and flexible resource preloading.

---

1. The React Compiler: Goodbye `useMemo` and `useCallback`

Historically, React developers manually wrapped expensive calculations in `useMemo` and callback handlers in `useCallback` to avoid unnecessary component re-renders. The React Compiler automatically optimizes rendering during build time by analyzing JavaScript rules of hooks.

Before vs After React 19 Compiler

// Before React 19 (Manual Memoization)
const sortedItems = useMemo(() => {
  return items.slice().sort((a, b) => a.price - b.price);
}, [items]);

// In React 19 (Automated Compiler Memoization)
const sortedItems = items.slice().sort((a, b) => a.price - b.price);
// The compiler automatically caches sortedItems without extra hooks!

---

2. Unifying Async Promises with the `use()` Hook

The new `use()` API allows reading promise values directly inside render functions, integrating seamlessly with React Suspense boundaries.

import { use, Suspense } from "react";

function UserProfile({ userPromise }: { userPromise: Promise<{ name: string; email: string }> }) {
  // Read promise value inline
  const user = use(userPromise);
  return (
    <div className="p-4 border rounded-lg">
      <h3 className="font-bold">{user.name}</h3>
      <p className="text-gray-600">{user.email}</p>
    </div>
  );
}

---

3. React 19 Core Paradigm Comparison