React 19 + Clerk

// Before React 19 (manual memoization)
const MemoizedUserProfile = React.memo(({ user }) => {
  return <div>{user.firstName}</div>;
});

const memoizedValue = useMemo(() =>
  computeExpensiveValue(user),
  [user]
);

const memoizedCallback = useCallback(() => {
  handleUserAction(user);
}, [user]);

// After React 19 (automatic with React Compiler)
function UserProfile({ user }) {
  // Compiler automatically memoizes
  const value = computeExpensiveValue(user);

  const handleClick = () => {
    handleUserAction(user);
  };

  return <div onClick={handleClick}>{user.firstName}</div>;
}

"use client";

import { useUser } from "@clerk/nextjs";

// React Compiler automatically optimizes this
export default function OptimizedUserProfile() {
  const { user, isLoaded } = useUser();

  // No need for useMemo - compiler handles it
  const displayName = user?.firstName || "Guest";
  const emailCount = user?.emailAddresses.length || 0;

  // No need for useCallback - compiler handles it
  const handleProfileUpdate = () => {
    console.log("Updating profile for", user?.id);
  };

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <h1>{displayName}</h1>
      <p>{emailCount} email(s)</p>
      <button onClick={handleProfileUpdate}>Update Profile</button>
    </div>
  );
}

// Server Action
async function updateProfile(formData: FormData) {
  "use server";

  const name = formData.get("name");
  await db.users.update({ name });

  return { success: true };
}

// Client Component
function ProfileForm() {
  const [state, formAction] = useActionState(updateProfile, null);
  const { pending } = useFormStatus();

  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={pending}>
        {pending ? "Saving..." : "Save"}
      </button>
      {state?.success && <p>Saved!</p>}
    </form>
  );
}

// app/actions/profile.ts
"use server";

import { auth } from "@clerk/nextjs/server";
import { revalidatePath } from "next/cache";

export async function updateUserProfile(formData: FormData) {
  const { userId } = auth();

  if (!userId) {
    return { error: "Unauthorized" };
  }

  const bio = formData.get("bio") as string;

  // Update user profile in your database
  await db.profiles.update({
    where: { clerkUserId: userId },
    data: { bio }
  });

  revalidatePath("/profile");
  return { success: true };
}

// app/profile/page.tsx
"use client";

import { useActionState, useFormStatus } from "react";
import { updateUserProfile } from "@/app/actions/profile";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Saving..." : "Update Profile"}
    </button>
  );
}

export default function ProfilePage() {
  const [state, formAction] = useActionState(updateUserProfile, null);

  return (
    <form action={formAction}>
      <textarea name="bio" placeholder="Your bio" />
      <SubmitButton />
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">Profile updated!</p>}
    </form>
  );
}

function TodoList({ todos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );

  async function addTodo(formData) {
    const todo = { id: Date.now(), text: formData.get("text") };
    addOptimisticTodo(todo);
    await saveTodo(todo);
  }

  return (
    <div>
      {optimisticTodos.map(todo => (
        <div key={todo.id} className={todo.pending ? "opacity-50" : ""}>
          {todo.text}
        </div>
      ))}
      <form action={addTodo}>
        <input name="text" />
        <button>Add</button>
      </form>
    </div>
  );
}

"use client";

import { useOptimistic } from "react";
import { useUser } from "@clerk/nextjs";

export default function UserPreferences() {
  const { user } = useUser();
  const [optimisticTheme, setOptimisticTheme] = useOptimistic(
    user?.publicMetadata?.theme || "light"
  );

  async function updateTheme(newTheme: string) {
    // Optimistically update UI
    setOptimisticTheme(newTheme);

    try {
      // Update on server
      await user?.update({
        publicMetadata: {
          ...user.publicMetadata,
          theme: newTheme
        }
      });
    } catch (error) {
      // If it fails, React will revert to actual state
      console.error("Failed to update theme:", error);
    }
  }

  return (
    <div>
      <p>Current theme: {optimisticTheme}</p>
      <button onClick={() => updateTheme("dark")}>
        Dark Mode
      </button>
      <button onClick={() => updateTheme("light")}>
        Light Mode
      </button>
    </div>
  );
}

// Reading promises
function UserData({ userPromise }) {
  const user = use(userPromise);
  return <div>{user.name}</div>;
}

// Reading context
function ThemedComponent() {
  const theme = use(ThemeContext);
  return <div className={theme}>{/* content */}</div>;
}

// With Suspense
function App() {
  const userPromise = fetchUser();

  return (
    <Suspense fallback={<Loading />}>
      <UserData userPromise={userPromise} />
    </Suspense>
  );
}

"use client";

import { use, Suspense } from "react";
import { useAuth } from "@clerk/nextjs";

// Fetch user data based on Clerk auth
async function fetchUserData(userId: string) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

function UserProfile({ userDataPromise }: { userDataPromise: Promise<any> }) {
  const userData = use(userDataPromise);

  return (
    <div>
      <h2>{userData.name}</h2>
      <p>Posts: {userData.postCount}</p>
      <p>Followers: {userData.followers}</p>
    </div>
  );
}

export default function ProfilePage() {
  const { userId } = useAuth();

  if (!userId) {
    return <div>Please sign in</div>;
  }

  const userDataPromise = fetchUserData(userId);

  return (
    <Suspense fallback={<div>Loading profile...</div>}>
      <UserProfile userDataPromise={userDataPromise} />
    </Suspense>
  );
}

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title} - My Blog</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:image" content={post.image} />

      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    </>
  );
}

"use client";

import { useUser } from "@clerk/nextjs";

export default function UserDashboard() {
  const { user, isLoaded } = useUser();

  if (!isLoaded) return <div>Loading...</div>;

  const userName = user?.firstName || "User";

  return (
    <>
      <title>{userName}'s Dashboard - MyApp</title>
      <meta
        name="description"
        content={`Dashboard for ${userName}`}
      />

      <div>
        <h1>Welcome, {userName}!</h1>
        <p>Manage your account settings and preferences.</p>
      </div>
    </>
  );
}

// Before React 19
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// After React 19
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// Usage (same as before)
function Form() {
  const inputRef = useRef(null);

  return <MyInput ref={inputRef} />;
}

"use client";

import { useRef } from "react";
import { SignIn } from "@clerk/nextjs";

// Custom wrapper around Clerk's SignIn with ref support
function CustomSignIn({ ref, className, ...props }) {
  // No need for forwardRef anymore!
  return (
    <div ref={ref} className={`custom-sign-in ${className}`}>
      <SignIn {...props} />
    </div>
  );
}

export default function LoginPage() {
  const signInRef = useRef<HTMLDivElement>(null);

  const scrollToSignIn = () => {
    signInRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <button onClick={scrollToSignIn}>Go to Sign In</button>
      <CustomSignIn
        ref={signInRef}
        className="mt-8"
      />
    </div>
  );
}

// React 19 shows:
// - Exact component where error occurred
// - Full component stack trace
// - Hydration mismatch details
// - Suggestions for fixing common issues

// Example hydration error (React 19):
// Hydration failed because the server rendered HTML didn't match the client.
//
// Expected server HTML:
//   <div>Server content</div>
//
// Received client HTML:
//   <div>Client content</div>
//
// Component stack:
//   in MyComponent (at App.tsx:42)
//   in Layout (at App.tsx:15)

"use client";

import { useUser } from "@clerk/nextjs";
import { useState, useEffect } from "react";

export default function ProblematicComponent() {
  const { user } = useUser();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // React 19 will show clear error if hydration mismatch occurs
  // Old: Generic "Text content does not match"
  // New: Shows exactly what mismatched and where

  if (!mounted) {
    return null; // Prevent hydration issues
  }

  return (
    <div>
      {/* Now if there's a mismatch, you get helpful details */}
      {user?.firstName}
    </div>
  );
}

// Async Server Component
async function UserPosts() {
  const posts = await db.posts.findMany();

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

// With Suspense boundaries
export default function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <UserPosts />
    </Suspense>
  );
}

// app/dashboard/page.tsx (Server Component)
import { auth, currentUser } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

async function getUserData(userId: string) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  return response.json();
}

export default async function DashboardPage() {
  const { userId } = auth();

  if (!userId) {
    redirect("/sign-in");
  }

  // Get user from Clerk (server-side)
  const user = await currentUser();

  // Fetch additional user data
  const userData = await getUserData(userId);

  return (
    <div>
      <h1>Welcome, {user?.firstName}!</h1>
      <p>Email: {user?.emailAddresses[0]?.emailAddress}</p>
      <div>
        <h2>Your Stats</h2>
        <p>Posts: {userData.postCount}</p>
        <p>Followers: {userData.followers}</p>
      </div>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <SlowComponent />
      <Suspense fallback={<InlineLoader />}>
        <VerySlowComponent />
      </Suspense>
    </Suspense>
  );
}

// Nested suspense boundaries allow progressive rendering
// - Skeleton shows immediately
// - SlowComponent streams in when ready
// - InlineLoader shows while VerySlowComponent loads
// - VerySlowComponent streams in when ready

"use client";

import { Suspense, use } from "react";
import { useAuth } from "@clerk/nextjs";

async function fetchUserStats(userId: string) {
  const response = await fetch(`/api/stats/${userId}`);
  return response.json();
}

function UserStats({ statsPromise }: { statsPromise: Promise<any> }) {
  const stats = use(statsPromise);

  return (
    <div className="grid grid-cols-3 gap-4">
      <div>Posts: {stats.posts}</div>
      <div>Followers: {stats.followers}</div>
      <div>Likes: {stats.likes}</div>
    </div>
  );
}

export default function UserDashboard() {
  const { userId } = useAuth();

  if (!userId) return <div>Please sign in</div>;

  const statsPromise = fetchUserStats(userId);

  return (
    <div>
      <h1>Dashboard</h1>

      {/* Main content shows immediately */}
      <div>Welcome back!</div>

      {/* Stats load progressively */}
      <Suspense fallback={<div>Loading stats...</div>}>
        <UserStats statsPromise={statsPromise} />
      </Suspense>
    </div>
  );
}

// Enable view transitions in Next.js
// next.config.js
module.exports = {
  experimental: {
    viewTransitions: true
  }
};

// Use in components
function PageTransition({ children }) {
  return (
    <div style={{ viewTransitionName: "page-content" }}>
      {children}
    </div>
  );
}

// CSS for transition
// @keyframes slideIn { ... }
// ::view-transition-old(page-content) { ... }
// ::view-transition-new(page-content) { ... }

import { Show } from "@clerk/nextjs";

export default function AnimatedLayout({ children }) {
  return (
    <>
      {/* Animate auth state changes */}
      <Show when="signed-in">
        <div style={{ viewTransitionName: "auth-state" }}>
          <header>Authenticated Header</header>
        </div>
      </Show>

      <Show when="signed-out">
        <div style={{ viewTransitionName: "auth-state" }}>
          <header>Public Header</header>
        </div>
      </Show>

      {/* Animate page transitions */}
      <main style={{ viewTransitionName: "main-content" }}>
        {children}
      </main>
    </>
  );
}

// Add CSS for smooth transitions
// ::view-transition-old(auth-state) {
//   animation: fade-out 0.3s ease-out;
// }
// ::view-transition-new(auth-state) {
//   animation: fade-in 0.3s ease-in;
// }

import { Activity } from "react";

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>
        Open Modal
      </button>

      <Activity mode={showModal ? "visible" : "hidden"}>
        <Modal onClose={() => setShowModal(false)}>
          {/* State is preserved when hidden */}
          {/* Cleanup runs when hidden */}
          <ExpensiveForm />
        </Modal>
      </Activity>
    </div>
  );
}

"use client";

import { Activity } from "react";
import { useState } from "react";
import { useClerk } from "@clerk/nextjs";

export default function AuthUI() {
  const clerk = useClerk();
  const [showSignIn, setShowSignIn] = useState(false);
  const [formData, setFormData] = useState({ email: "" });

  return (
    <div>
      <button onClick={() => setShowSignIn(true)}>
        Sign In
      </button>

      {/* Preserve sign-in form state when hidden */}
      <Activity mode={showSignIn ? "visible" : "hidden"}>
        <div className="modal">
          <input
            value={formData.email}
            onChange={e => setFormData({ email: e.target.value })}
            placeholder="Email"
          />
          <button onClick={() => clerk.openSignIn()}>
            Continue with Clerk
          </button>
          <button onClick={() => setShowSignIn(false)}>
            Cancel
          </button>
        </div>
      </Activity>

      {/* Main content continues to work */}
      <main>App content here</main>
    </div>
  );
}

import { useEffectEvent } from "react";

function Chat({ roomId, theme }) {
  // ❌ Before: Effect re-runs when theme changes
  useEffect(() => {
    const connection = connectToChat(roomId);
    connection.on("message", (msg) => {
      showNotification(msg, theme); // Uses theme
    });
    return () => connection.disconnect();
  }, [roomId, theme]); // Must include theme

  // ✅ After: Effect only re-runs when roomId changes
  const onMessage = useEffectEvent((msg) => {
    showNotification(msg, theme); // Can use theme
  });

  useEffect(() => {
    const connection = connectToChat(roomId);
    connection.on("message", onMessage); // Stable reference
    return () => connection.disconnect();
  }, [roomId]); // Only roomId needed
}

"use client";

import { useEffectEvent } from "react";
import { useEffect } from "react";
import { useUser, useAuth } from "@clerk/nextjs";

export default function UserActivity() {
  const { user } = useUser();
  const { getToken } = useAuth();

  // Stable event handler that can access latest user/token
  const logActivity = useEffectEvent(async (activity: string) => {
    // Can access latest user without re-running effect
    const token = await getToken();

    await fetch("/api/log", {
      method: "POST",
      headers: { Authorization: `Bearer ${token}` },
      body: JSON.stringify({
        userId: user?.id,
        activity,
        timestamp: Date.now()
      })
    });
  });

  useEffect(() => {
    // Effect doesn't re-run when user changes
    const interval = setInterval(() => {
      logActivity("heartbeat");
    }, 60000);

    return () => clearInterval(interval);
  }, []); // No dependencies needed!

  return <div>Tracking user activity...</div>;
}