React 19 Deep Dive: React Compiler, Server Components, and Actions

// React 18: Boilerplate-heavy manual memoization
import { useMemo, useCallback } from 'react';

function AnalyticsDashboard({ rawData, filterCriteria, onExport }) {
    // Tedious calculation caching requiring exact dependency arrays
    const filteredMetrics = useMemo(() => {
        return rawData
            .filter(item => item.region === filterCriteria.region)
            .reduce((acc, curr) => acc + curr.revenue, 0);
    }, [rawData, filterCriteria.region]);

    // Tedious function reference caching
    const handleDownload = useCallback((format) => {
        onExport({ data: filteredMetrics, format });
    }, [filteredMetrics, onExport]);

    return <MetricsView data={filteredMetrics} onDownload={handleDownload} />;
}

// React 19: Pure, clean, idiomatic JavaScript
// The React Compiler optimizes re-renders automatically under the hood!
function AnalyticsDashboard({ rawData, filterCriteria, onExport }) {
    const filteredMetrics = rawData
        .filter(item => item.region === filterCriteria.region)
        .reduce((acc, curr) => acc + curr.revenue, 0);

    const handleDownload = (format) => {
        onExport({ data: filteredMetrics, format });
    };

    return <MetricsView data={filteredMetrics} onDownload={handleDownload} />;
}

// React Server Component: Runs exclusively on the backend
import db from '@/lib/database';
import { Suspense } from 'react';
import EditProfileButton from './EditProfileButton'; // Client Component

export default async function UserProfileServer({ userId }) {
    // Direct zero-latency database query without API route serialization!
    const user = await db.users.findUnique({
        where: { id: userId },
        include: { preferences: true, billing: true }
    });

    if (!user) {
        return <div class="error-banner">User profile not found.</div>;
    }

    return (
        <section className="profile-card">
            <div className="profile-header">
                <h2>{user.fullName}</h2>
                <span className="badge">{user.billing.tier}</span>
            </div>
            <p>Email: {user.email}</p>
            <p>Member since: {new Date(user.createdAt).toLocaleDateString()}</p>

            {/* Seamless boundary passing data down to interactive Client Component */}
            <EditProfileButton initialName={user.fullName} userId={user.id} />
        </section>
    );
}

'use client';

import { useActionState } from 'react';
import { updateUsernameAction } from './actions';

export default function UserProfileForm({ currentName }) {
    // useActionState handles pending state, server response, and error dispatching
    const [state, formAction, isPending] = useActionState(updateUsernameAction, {
        success: null,
        error: null
    });

    return (
        <form action={formAction} className="user-form">
            <label htmlFor="username">Display Name</label>
            <input 
                id="username"
                name="username" 
                defaultValue={currentName} 
                disabled={isPending}
                required 
            />

            <button type="submit" disabled={isPending} className="btn-primary">
                {isPending ? 'Saving to Database...' : 'Update Name'}
            </button>

            {state.error && <p className="error-text">⚠️ {state.error}</p>}
            {state.success && <p className="success-text">✅ Username updated successfully!</p>}
        </form>
    );
}

'use client';

import { useOptimistic, useRef } from 'react';
import { postCommentServerAction } from './commentActions';

export default function CommentStream({ initialComments }) {
    const formRef = useRef(null);
    
    // Set up optimistic state with pure reducer pattern
    const [optimisticComments, addOptimisticComment] = useOptimistic(
        initialComments,
        (currentList, newCommentText) => [
            ...currentList,
            {
                id: 'temp-' + Date.now(),
                text: newCommentText,
                author: 'You (Sending...)',
                pending: true
            }
        ]
    );

    async function handleFormSubmit(formData) {
        const commentText = formData.get('comment');
        formRef.current.reset();

        // 1. Immediately update UI with predicted optimistic state
        addOptimisticComment(commentText);

        // 2. Perform actual server action
        await postCommentServerAction(commentText);
    }

    return (
        <div className="comment-stream">
            <ul className="comment-list">
                {optimisticComments.map((c) => (
                    <li key={c.id} style={{ opacity: c.pending ? 0.6 : 1.0 }}>
                        <strong>{c.author}:</strong> {c.text}
                    </li>
                ))}
            </ul>

            <form ref={formRef} action={handleFormSubmit} className="comment-form">
                <input name="comment" placeholder="Write a comment..." required />
                <button type="submit">Post Comment</button>
            </form>
        </div>
    );
}

import { use, Suspense } from 'react';

function UserSubscriptionStatus({ subscriptionPromise }) {
    // Unwraps the Promise directly during render phase!
    // If pending, React automatically suspends to the nearest Suspense fallback.
    const status = use(subscriptionPromise);

    return <div className="subscription-badge">Active Plan: {status.tier}</div>;
}

export default function SubscriptionCard({ subscriptionPromise }) {
    return (
        <Suspense fallback={<div className="skeleton-loader">Loading plan...</div>}>
            <UserSubscriptionStatus subscriptionPromise={subscriptionPromise} />
        </Suspense>
    );
}