React 18 & 19: Concurrent Rendering, The Compiler, and Server Components

// Before (React 17 — legacy, synchronous)
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After (React 18 — concurrent mode enabled)
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root')!);
root.render(<App />);

// That's it. All React 18 features now work.
// StrictMode double-invokes effects in dev to surface side-effect bugs —
// keep it on, it's intentional.

// React 17 behaviour
setTimeout(() => {
  setCount(c => c + 1); // triggers re-render
  setFlag(f => !f);     // triggers another re-render
  // 2 renders total — wasteful
}, 1000);

// Inside a React event handler (already batched in React 17)
function handleClick() {
  setCount(c => c + 1); // batched
  setFlag(f => !f);     // batched
  // 1 render total
}

// React 18 — all of these now batch automatically

// Inside setTimeout
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 1 render total ✓
}, 1000);

// Inside a fetch callback
fetch('/api/data').then(() => {
  setData(result);
  setLoading(false);
  // 1 render total ✓
});

// If you explicitly need to opt out of batching (rare):
import { flushSync } from 'react-dom';

flushSync(() => setCount(c => c + 1)); // forces immediate re-render
flushSync(() => setFlag(f => !f));     // forces another immediate re-render
// Use flushSync sparingly — it's an escape hatch for libraries/integrations

import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Product[]>([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;

    // Urgent: update the input immediately
    setQuery(value);

    // Non-urgent: filter/render the results list
    startTransition(() => {
      const filtered = allProducts.filter(p =>
        p.name.toLowerCase().includes(value.toLowerCase())
      );
      setResults(filtered);
    });
  }

  return (
    <>
      <input value={query} onChange={handleSearch} placeholder="Search products..." />

      {/* Show a loading indicator while transition is pending */}
      {isPending && <span className="text-sm text-gray-400">Updating results...</span>}

      {/* This re-render is deferred — won't block the input */}
      <ProductList products={results} />
    </>
  );
}

import { useDeferredValue, memo } from 'react';

function SearchResults({ query }: { query: string }) {
  // Defers re-rendering this component when query changes rapidly
  const deferredQuery = useDeferredValue(query);

  // isStale lets you visually indicate the results are outdated
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 0.2s' }}>
      {/* Only re-renders when deferredQuery settles */}
      <ExpensiveList query={deferredQuery} />
    </div>
  );
}

// What you write
function ProductCard({ product, onAddToCart }) {
  return (
    <div onClick={() => onAddToCart(product.id)}>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
}

// What the compiler effectively generates (conceptually)
const ProductCard = React.memo(function ProductCard({ product, onAddToCart }) {
  const handleClick = useCallback(
    () => onAddToCart(product.id),
    [onAddToCart, product.id]
  );
  return (
    <div onClick={handleClick}>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
});
// You write the top, the compiler emits the bottom.

# Install
npm install -D babel-plugin-react-compiler
npm install react-compiler-runtime   # only needed if staying on React 18

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      // Optional: target a specific React version if on React 18
      // runtimeModule: 'react-compiler-runtime',

      // Optional: enable only for specific directories during migration
      // sources: (filename) => filename.includes('src/components'),
    }],
    // ... other plugins
  ],
};

// next.config.js (Next.js 15+ has first-class support)
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler']],
      },
    }),
  ],
});

// Scenario 1: Compiler handles this — you can remove the manual memo
// BEFORE
const expensiveValue = useMemo(() => heavyComputation(data), [data]);

// AFTER (with compiler enabled) — just write it naturally
const expensiveValue = heavyComputation(data);
// Compiler detects it only depends on 'data' and memoizes automatically


// Scenario 2: Still use useMemo — non-React object with referential identity
// The compiler cannot predict when external class instances should be recreated
const chartConfig = useMemo(() => new ChartJS({
  type: 'line',
  data: chartData,
  options: { responsive: true },
}), [chartData]);


// Scenario 3: Still use useCallback — passing to a third-party component
// that does its own shouldComponentUpdate with referential equality checks
const onScroll = useCallback((event: ScrollEvent) => {
  virtualizer.handleScroll(event); // third-party virtualizer
}, [virtualizer]);


// Scenario 4: Code the compiler skips (Rules of Hooks violation)
// Fix the violation — don't add manual memos as a workaround
function BadComponent({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // ❌ hook in condition — compiler skips this file
  }
}

// app/blog/[slug]/page.tsx — This is a Server Component by default in Next.js 15

// These imports stay on the server — zero cost to the client bundle
import { db } from '@/lib/database';           // DB client — server only
import { marked } from 'marked';               // 500kb parser — server only
import { highlight } from 'highlight.js';      // Code highlighting — server only

interface Props {
  params: { slug: string };
}

// No 'use client' = Server Component
// async/await works natively — no useEffect, no loading state
export default async function BlogPost({ params }: Props) {
  // Direct DB access — no API route needed
  const post = await db.posts.findUnique({
    where: { slug: params.slug },
  });

  if (!post) notFound();

  // Expensive processing — runs on server, result is streamed
  const html = marked(post.content);

  return (
    <article>
      <h1>{post.title}</h1>
      {/* dangerouslySetInnerHTML is fine here — content is trusted, server-rendered */}
      <div dangerouslySetInnerHTML={{ __html: html }} />

      {/* Client Component for interactivity — only this ships JS */}
      <LikeButton postId={post.id} initialLikes={post.likes} />
    </article>
  );
}

// components/LikeButton.tsx
'use client'; // This file and its imports run on the client

import { useState } from 'react';

interface Props {
  postId: string;
  initialLikes: number;
}

export function LikeButton({ postId, initialLikes }: Props) {
  const [likes, setLikes] = useState(initialLikes);
  const [liked, setLiked] = useState(false);

  async function handleLike() {
    if (liked) return;
    setLiked(true);
    setLikes(l => l + 1);

    // Optimistic update — call server action in background
    await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
  }

  return (
    <button onClick={handleLike} disabled={liked}>
      {liked ? '❤️' : '🤍'} {likes} likes
    </button>
  );
}

// The parent BlogPost (Server Component) renders this.
// Only LikeButton's code ships to the client — not the DB client, not marked, not highlight.js

// Old pattern (Client Component) — lots of boilerplate
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => { if (!cancelled) setUser(data); })
      .catch(e => { if (!cancelled) setError(e.message); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  return <div>{user?.name}</div>;
}

// New pattern (Server Component) — clean, no boilerplate
async function UserProfile({ userId }: { userId: string }) {
  // Errors bubble to the nearest error.tsx boundary automatically
  const user = await db.users.findUnique({ where: { id: userId } });

  return <div>{user?.name}</div>;
}
// Suspense in the parent handles the loading state — one boundary, many components

// app/dashboard/page.tsx
import { Suspense } from 'react';
import { UserStats } from './UserStats';       // async Server Component
import { RecentOrders } from './RecentOrders'; // async Server Component
import { Notifications } from './Notifications'; // async Server Component

export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-6">
      {/* All three fetch in parallel — each streams independently */}
      <Suspense fallback={<StatsSkeleton />}>
        <UserStats />
      </Suspense>

      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders />
      </Suspense>

      <Suspense fallback={<NotificationsSkeleton />}>
        <Notifications />
      </Suspense>
    </div>
  );
}

// app/dashboard/UserStats.tsx
async function UserStats() {
  const stats = await db.analytics.getUserStats(); // runs in parallel with others
  return <StatsCard data={stats} />;
}