30 Golden Frontend Topics Every Senior Developer Must Master in 2026

// BAD: server and client produce different output - hydration mismatch
function LastSeen() {
  return <span>Last seen: {new Date().toLocaleTimeString()}</span>;
}

// GOOD: defer the client-only value until after hydration
"use client";
import { useState, useEffect } from "react";

function LastSeen() {
  const [time, setTime] = useState<string | null>(null);

  useEffect(() => {
    // runs only on client, after hydration - no mismatch
    setTime(new Date().toLocaleTimeString());
  }, []);

  if (!time) return <span>Last seen: -</span>; // matches server output
  return <span>Last seen: {time}</span>;
}

// Selective hydration in React 18 - slow data doesn't block fast UI
import { Suspense } from "react";

export default function ProductPage() {
  return (
    <>
      {/* hydrates immediately - fast, critical content */}
      <ProductHeader />

      {/* hydrates independently - slow fetch doesn't block above */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews /> {/* fetches from slow third-party API */}
      </Suspense>
    </>
  );
}

// Node.js server - streaming with renderToPipeableStream
import { renderToPipeableStream } from "react-dom/server";
import { ServerApp } from "./App";

app.get("*", (req, res) => {
  res.setHeader("Content-Type", "text/html");

  const { pipe, abort } = renderToPipeableStream(<ServerApp url={req.url} />, {
    // flush the HTML shell immediately - browser starts parsing CSS/JS
    bootstrapScripts: ["/bundle.js"],

    onShellReady() {
      res.statusCode = 200;
      pipe(res); // stream starts here - shell is ready
    },

    onShellError(error) {
      // shell failed (layout broke) - send 500 before anything was flushed
      res.statusCode = 500;
      res.send("<h1>Something went wrong</h1>");
    },

    onError(error) {
      // non-shell errors - a <Suspense> boundary caught it
      console.error(error);
    },
  });

  // abort slow streams after 10s - don't hang the connection
  setTimeout(abort, 10_000);
});

// Next.js App Router - out-of-order streaming with Suspense
// The shell renders instantly. UserDashboard streams in when its data resolves.
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>           {/* static - in the shell */}
      <QuickStats />                {/* static - in the shell */}

      <Suspense fallback={<Spinner />}>
        <UserDashboard />           {/* async - streams in when DB query resolves */}
      </Suspense>

      <Suspense fallback={<Spinner />}>
        <RecentActivity />          {/* async - streams in independently */}
      </Suspense>
    </main>
  );
}

// UserDashboard is an async Server Component - no useEffect, no loading state
async function UserDashboard() {
  const data = await db.query("SELECT * FROM dashboards WHERE user_id = $1", [
    getCurrentUserId(),
  ]);
  return <DashboardView data={data} />;
}

// app/products/page.tsx - Server Component (default in App Router)
// No "use client" - runs on server only, zero client bundle cost

async function ProductsPage() {
  // Direct DB access - no API route needed, no fetch overhead
  const products = await db.products.findMany({ take: 20 });

  return (
    <section>
      <h1>Products</h1>
      {products.map((product) => (
        // Server Component passes data DOWN to a Client Component
        // but cannot receive state or event handlers from it
        <ProductCard key={product.id} product={product}>
          <AddToCartButton productId={product.id} /> {/* Client Component */}
        </ProductCard>
      ))}
    </section>
  );
}

// components/AddToCartButton.tsx - Client Component
"use client";
import { useState } from "react";

export function AddToCartButton({ productId }: { productId: string }) {
  const [added, setAdded] = useState(false);

  return (
    <button onClick={() => setAdded(true)}>
      {added ? "Added!" : "Add to Cart"}
    </button>
  );
}

// WRONG: two sequential server fetches - creates a waterfall
async function ProductPage({ id }: { id: string }) {
  const product = await fetchProduct(id);         // 200ms
  const reviews = await fetchReviews(id);         // 300ms - waits for product!
  // total: 500ms
  return <View product={product} reviews={reviews} />;
}

// CORRECT: parallel fetches with Promise.all - no waterfall
async function ProductPage({ id }: { id: string }) {
  const [product, reviews] = await Promise.all([
    fetchProduct(id),   // 200ms
    fetchReviews(id),   // 300ms - runs in parallel
  ]);
  // total: 300ms (the longer of the two)
  return <View product={product} reviews={reviews} />;
}

// app/blog/[slug]/page.tsx

// OPTION 1: Full Static (SSG) - built at deploy time
// Best for: blog posts, docs, marketing pages
export async function generateStaticParams() {
  const posts = await getAllPostSlugs();
  return posts.map((slug) => ({ slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

// OPTION 2: ISR - revalidate every 60 seconds
// Best for: product pages, news articles, dashboards
export const revalidate = 60;

// OPTION 3: On-demand revalidation - revalidate when content changes
// In your CMS webhook handler:
import { revalidatePath, revalidateTag } from "next/cache";

export async function POST(req: Request) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);     // invalidate specific path
  revalidateTag("blog-posts");         // invalidate all tagged fetches
  return Response.json({ revalidated: true });
}

// OPTION 4: Dynamic - no cache, runs on every request
// Triggered automatically if you read cookies/headers/searchParams
export const dynamic = "force-dynamic"; // explicit opt-in

// The silent trap - this makes the WHOLE route dynamic:
import { cookies } from "next/headers";

async function LayoutComponent() {
  const theme = cookies().get("theme"); // ← opts entire route into dynamic!
  // FIX: move this to a Client Component or a dynamic leaf node
}

// PPR (Partial Prerendering) - static shell + dynamic holes in one route
// Next.js 15 experimental feature
export const experimental_ppr = true;

export default function ProductPage() {
  return (
    <>
      {/* Static - rendered at build time, served from CDN edge */}
      <ProductInfo />
      <ProductImages />

      {/* Dynamic - rendered at request time, streamed in */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice />      {/* real-time pricing, user-specific discounts */}
      </Suspense>

      <Suspense fallback={<CartSkeleton />}>
        <CartStatus />        {/* reads cookies - must be dynamic */}
      </Suspense>
    </>
  );
}

// Measuring and reporting Core Web Vitals in production
import { onLCP, onINP, onCLS } from "web-vitals";

function sendToAnalytics(metric: Metric) {
  // Send to your analytics endpoint - Datadog, GA4, custom pipeline
  navigator.sendBeacon("/analytics", JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,   // "good" | "needs-improvement" | "poor"
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

// Breaking up a long task to improve INP - use scheduler.yield()
async function processLargeDataset(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);

    // Yield to the browser every 50 items - prevents INP spikes
    if (i % 50 === 0) {
      await scheduler.yield(); // browser handles pending interactions here
    }
  }
}

<!-- LCP optimization - tell the browser this image is the LCP candidate -->
<!-- fetchpriority="high" bypasses the preload scanner delay -->
<img
  src="/hero.avif"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1200"
  height="630"
  alt="Hero image"
/>

<!-- Avoid CLS - always set width and height on images -->
<!-- Without these, the browser doesn't reserve space and layout shifts -->
<img src="/product.jpg" width="400" height="300" alt="Product" />

// next.config.ts - advanced chunk splitting strategy
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.optimization.splitChunks = {
        chunks: "all",
        cacheGroups: {
          // Separate React into its own long-lived chunk
          // React rarely updates - users keep this cached across deploys
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: "react-vendor",
            chunks: "all",
            priority: 30,
          },
          // Heavy UI library in its own chunk
          ui: {
            test: /[\\/]node_modules[\\/](@radix-ui|framer-motion)[\\/]/,
            name: "ui-vendor",
            chunks: "all",
            priority: 20,
          },
          // Everything else from node_modules
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all",
            priority: 10,
          },
        },
      };
    }
    return config;
  },
};

export default nextConfig;

// Dynamic import - splits this component into its own chunk
// Only loads when the modal is opened, not on initial page load
import dynamic from "next/dynamic";

const HeavyChartModal = dynamic(
  () => import("@/components/HeavyChartModal"),
  {
    loading: () => <Skeleton className="h-96 w-full" />,
    ssr: false, // chart libraries often use window - skip SSR
  }
);

export function Dashboard() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>View Analytics</button>
      {open && <HeavyChartModal />}
    </>
  );
}

"use client";
import { useState, useTransition, useDeferredValue, memo } from "react";

// useTransition - mark the filter update as non-urgent
// The input stays responsive even if filtering 10,000 items is slow
function ProductSearch({ products }: { products: Product[] }) {
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();
  const [filteredProducts, setFilteredProducts] = useState(products);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
    setQuery(value); // urgent - update input immediately

    startTransition(() => {
      // non-urgent - React can interrupt and restart this
      setFilteredProducts(products.filter((p) =>
        p.name.toLowerCase().includes(value.toLowerCase())
      ));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} placeholder="Search..." />
      {isPending && <span>Filtering...</span>}
      <ProductList products={filteredProducts} />
    </>
  );
}

// useDeferredValue - alternative: defer the value, not the setter
function ProductSearchV2({ products }: { products: Product[] }) {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query); // lags behind during transitions

  const filtered = useMemo(
    () => products.filter((p) =>
      p.name.toLowerCase().includes(deferredQuery.toLowerCase())
    ),
    [products, deferredQuery] // only recomputes when deferredQuery settles
  );

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ProductList products={filtered} />
    </>
  );
}

// memo - only re-renders if props actually changed
// Wrap expensive leaf components, not everything
const ProductCard = memo(function ProductCard({ product }: { product: Product }) {
  return <div>{product.name} - ${product.price}</div>;
});

import Image from "next/image";

// LCP image - must be eager, must have fetchPriority="high"
// next/image lazy-loads by default - that's wrong for the LCP candidate
export function HeroSection() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero banner showing dashboard analytics interface"
      width={1200}
      height={630}
      priority             // sets loading="eager" + fetchPriority="high"
      sizes="100vw"        // hint: this image spans full viewport width
      quality={85}
    />
  );
}

// Non-LCP image - lazy load, correct sizes for responsive breakpoints
export function ProductImage({ src }: { src: string }) {
  return (
    <Image
      src={src}
      alt="Product preview"
      width={400}
      height={300}
      loading="lazy"       // default - fine for below-the-fold images
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px"
      // ^ tells browser: full-width on mobile, 50% on tablet, 400px on desktop
      // without sizes, the browser downloads the full-size image on mobile
    />
  );
}

<!-- Native HTML - for non-Next.js projects -->
<!-- Art direction with <picture>: different image on mobile vs desktop -->
<picture>
  <source
    media="(max-width: 768px)"
    srcset="/hero-mobile.avif 768w, /hero-mobile.webp 768w"
    type="image/avif"
  />
  <source
    media="(min-width: 769px)"
    srcset="/hero-desktop.avif 1200w, /hero-desktop.webp 1200w"
    type="image/avif"
  />
  <!-- Fallback for browsers without AVIF/WebP support -->
  <img
    src="/hero-desktop.jpg"
    fetchpriority="high"
    loading="eager"
    width="1200"
    height="630"
    alt="Hero image"
  />
</picture>

<!-- Preload the LCP image in <head> - browser discovers it earlier -->
<link
  rel="preload"
  as="image"
  href="/hero.avif"
  imagesrcset="/hero-mobile.avif 768w, /hero-desktop.avif 1200w"
  imagesizes="(max-width: 768px) 100vw, 1200px"
/>

<!-- Resource hints - each has a specific job, not interchangeable -->

<!-- dns-prefetch: resolve DNS early for a domain you'll fetch from soon -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />

<!-- preconnect: DNS + TCP + TLS handshake - use sparingly (max 2-3) -->
<!-- costs a TCP connection; wrong domains waste it -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- preload: fetch this resource NOW, at high priority -->
<!-- use for LCP images, critical fonts, above-the-fold CSS -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

<!-- prefetch: fetch this resource at LOW priority during idle time -->
<!-- use for next-page resources the user will probably need -->
<link rel="prefetch" href="/dashboard/bundle.js" as="script" />

<!-- Speculation Rules API (Chrome 108+) - prerender entire next page -->
<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/checkout" },
    "eagerness": "moderate"
  }]
}
</script>

// Service Worker - three caching strategies with different tradeoffs
// Install in your Next.js app with next-pwa or a custom sw.ts

// Strategy 1: Cache First (fastest, stale risk)
// Use for: static assets, fonts, images that change rarely
self.addEventListener("fetch", (event: FetchEvent) => {
  if (event.request.destination === "image") {
    event.respondWith(
      caches.open("images-v1").then(async (cache) => {
        const cached = await cache.match(event.request);
        if (cached) return cached; // serve from cache immediately
        const response = await fetch(event.request);
        cache.put(event.request, response.clone()); // cache for next time
        return response;
      })
    );
  }
});

// Strategy 2: Stale-While-Revalidate (fast + fresh)
// Use for: API responses, HTML pages where slight staleness is OK
self.addEventListener("fetch", (event: FetchEvent) => {
  if (event.request.url.includes("/api/feed")) {
    event.respondWith(
      caches.open("api-v1").then(async (cache) => {
        const cached = await cache.match(event.request);
        const networkPromise = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone()); // update cache in background
          return response;
        });
        return cached || networkPromise; // serve cache instantly, refresh behind the scenes
      })
    );
  }
});

// Strategy 3: Network First (always fresh, slow on bad connections)
// Use for: auth endpoints, cart, checkout - data must be current
self.addEventListener("fetch", (event: FetchEvent) => {
  if (event.request.url.includes("/api/cart")) {
    event.respondWith(
      fetch(event.request).catch(() =>
        caches.match(event.request) // only fall back to cache if offline
      )
    );
  }
});

// webpack.config.ts - Host App (the shell)
// The host loads remote modules at runtime - no build-time coupling
import { ModuleFederationPlugin } from "@module-federation/enhanced";

export default {
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        // remote app URL - can point to a different deploy URL per environment
        checkout: "checkout@https://checkout.myapp.com/remoteEntry.js",
        catalog: "catalog@https://catalog.myapp.com/remoteEntry.js",
      },
      shared: {
        react: {
          singleton: true,      // CRITICAL: only one React instance across all apps
          requiredVersion: "^19.0.0",
          eager: true,
        },
        "react-dom": { singleton: true, requiredVersion: "^19.0.0", eager: true },
        // Shared auth context - all micro-frontends use the same instance
        "@myapp/auth-context": { singleton: true, eager: true },
      },
    }),
  ],
};

// webpack.config.ts - Remote App (e.g., Checkout team)
export default {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
      filename: "remoteEntry.js",   // served at /remoteEntry.js
      exposes: {
        "./CheckoutFlow": "./src/CheckoutFlow", // exposed to host
      },
      shared: {
        react: { singleton: true, requiredVersion: "^19.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^19.0.0" },
      },
    }),
  ],
};

// Host app - lazy-loading a remote micro-frontend component
import { lazy, Suspense } from "react";

// This import resolves at runtime from checkout team's CDN
const CheckoutFlow = lazy(() => import("checkout/CheckoutFlow"));

export function CartPage() {
  return (
    <Suspense fallback={<CheckoutSkeleton />}>
      <CheckoutFlow />
    </Suspense>
  );
}

// BAD - boolean flag soup: impossible states are possible
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [isRetrying, setIsRetrying] = useState(false);
// Can you be isLoading AND isError? The code doesn't prevent it.

// GOOD - useReducer as a lightweight state machine
type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User }
  | { status: "error"; error: string }
  | { status: "retrying"; attempt: number };

type Action =
  | { type: "FETCH" }
  | { type: "SUCCESS"; data: User }
  | { type: "ERROR"; error: string }
  | { type: "RETRY" };

function reducer(state: State, action: Action): State {
  switch (state.status) {
    case "idle":
      if (action.type === "FETCH") return { status: "loading" };
      return state;
    case "loading":
      if (action.type === "SUCCESS") return { status: "success", data: action.data };
      if (action.type === "ERROR") return { status: "error", error: action.error };
      return state;
    case "error":
      if (action.type === "RETRY") return { status: "retrying", attempt: 1 };
      return state;
    default:
      return state;
  }
  // Impossible: "loading" + "error" simultaneously - the type system prevents it
}

function UserProfile({ userId }: { userId: string }) {
  const [state, dispatch] = useReducer(reducer, { status: "idle" });

  useEffect(() => {
    dispatch({ type: "FETCH" });
    fetchUser(userId)
      .then((data) => dispatch({ type: "SUCCESS", data }))
      .catch((err) => dispatch({ type: "ERROR", error: err.message }));
  }, [userId]);

  if (state.status === "idle") return null;
  if (state.status === "loading") return <Spinner />;
  if (state.status === "error") return (
    <ErrorView message={state.error} onRetry={() => dispatch({ type: "RETRY" })} />
  );
  if (state.status === "success") return <UserCard user={state.data} />;
}

"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";

interface Todo { id: string; text: string; completed: boolean; }

function TodoItem({ todo }: { todo: Todo }) {
  const queryClient = useQueryClient();

  const toggleMutation = useMutation({
    mutationFn: (id: string) => api.toggleTodo(id),

    // Step 1: Optimistically update the cache BEFORE the request
    onMutate: async (id) => {
      // Cancel any in-flight refetches - they'd overwrite our optimistic update
      await queryClient.cancelQueries({ queryKey: ["todos"] });

      // Snapshot current state for rollback
      const previousTodos = queryClient.getQueryData<Todo[]>(["todos"]);

      // Apply the optimistic update immediately
      queryClient.setQueryData<Todo[]>(["todos"], (old) =>
        old?.map((t) => t.id === id ? { ...t, completed: !t.completed } : t)
      );

      return { previousTodos }; // pass snapshot to onError
    },

    // Step 2: Rollback if the server returns an error
    onError: (err, id, context) => {
      queryClient.setQueryData(["todos"], context?.previousTodos);
      toast.error("Failed to update. Reverted.");
    },

    // Step 3: Sync with server truth - always refetch on settle
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["todos"] });
    },
  });

  return (
    <li onClick={() => toggleMutation.mutate(todo.id)}>
      <span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
        {todo.text}
      </span>
    </li>
  );
}

// WebSocket with exponential backoff reconnect
class RealtimeConnection {
  private ws: WebSocket | null = null;
  private attempt = 0;
  private maxAttempts = 8;

  connect(url: string) {
    this.ws = new WebSocket(url);

    this.ws.onopen = () => {
      this.attempt = 0; // reset on successful connection
    };

    this.ws.onclose = () => {
      if (this.attempt < this.maxAttempts) {
        const delay = Math.min(1000 * 2 ** this.attempt, 30_000); // cap at 30s
        setTimeout(() => this.connect(url), delay);
        this.attempt++;
      }
    };

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      store.dispatch({ type: "WS_MESSAGE", payload: message });
    };
  }

  send(data: unknown) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data));
    }
  }
}