Performance & Accessibility in React

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount((c) => c + 1)}>Clicks: {count}</button>

      {/* ✗ Re-renders on every click even though it receives no count prop */}
      <ExpensiveComponent />

      {/* ✓ Only re-renders if 'items' reference changes */}
      <MemoizedList items={staticItems} />
    </>
  );
}

// Without memo: re-renders every time parent does
function ExpensiveComponent() { /* ... */ }

// With memo: skips re-render if props are shallowly equal
const MemoizedList = React.memo(function MemoizedList({ items }: { items: Item[] }) {
  return <ul>{items.map((i) => <li key={i.id}>{i.name}</li>)}</ul>;
});

// ✓ USE: component is expensive to render, receives stable props
const DataTable = React.memo(function DataTable({
  rows,
  onRowClick,
}: {
  rows: Row[];
  onRowClick: (id: string) => void;
}) {
  return (
    <table>
      {rows.map((row) => (
        <tr key={row.id} onClick={() => onRowClick(row.id)}>
          <td>{row.name}</td>
        </tr>
      ))}
    </table>
  );
});

// ✗ AVOID: component is trivial, memo overhead exceeds savings
const Label = React.memo(({ text }: { text: string }) => <span>{text}</span>);

function ProductList({ products, searchQuery }: Props) {
  // ✓ USE: sorting/filtering large arrays that re-run on every render
  const filtered = useMemo(
    () =>
      products
        .filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
        .sort((a, b) => a.name.localeCompare(b.name)),
    [products, searchQuery]
  );

  // ✗ AVOID: trivial computations: the memo bookkeeping costs more than the work
  const label = useMemo(() => `${products.length} items`, [products.length]);

  return <ul>{filtered.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

function Parent() {
  const [items, setItems] = useState<Item[]>([]);

  // ✓ USE: passed to a React.memo child: prevents unnecessary re-renders
  const handleDelete = useCallback((id: string) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  }, []); // empty deps: setItems is stable

  // ✗ AVOID: not passed to memo'd child: the useCallback overhead is pure waste
  const handleClick = useCallback(() => console.log("clicked"), []);

  return <MemoizedList items={items} onDelete={handleDelete} />;
}

import dynamic from "next/dynamic";

// ✓ Heavy chart library: only loads when the component renders
const RevenueChart = dynamic(() => import("@/components/RevenueChart"), {
  loading: () => <ChartSkeleton />,
  ssr: false, // chart library uses browser APIs: disable SSR
});

// ✓ Modal: only loads when opened (conditional render gates the import)
const EditUserModal = dynamic(() => import("@/components/EditUserModal"), {
  loading: () => null,
});

// ✓ Rich text editor: large bundle, only needed on edit pages
const RichTextEditor = dynamic(() => import("@/components/RichTextEditor"), {
  loading: () => <EditorSkeleton />,
  ssr: false,
});

"use client";

import { useRef } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";

export function VirtualList({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 48, // estimated row height in px
    overscan: 5,            // rows rendered outside viewport (buffer)
  });

  return (
    // Container must have a fixed height and overflow: auto
    <div ref={parentRef} style={{ height: "600px", overflow: "auto" }}>
      {/* Total scroll height: keeps scrollbar accurate */}
      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.index}
            style={{
              position: "absolute",
              top: virtualRow.start,
              height: virtualRow.size,
              width: "100%",
            }}
          >
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

// app/dashboard/page.tsx: Server Component
export default async function DashboardPage() {
  // ✓ All three queries run in parallel: no waterfall
  const [metrics, recentOrders, teamActivity] = await Promise.all([
    fetchMetrics(),
    fetchRecentOrders({ limit: 10 }),
    fetchTeamActivity({ days: 7 }),
  ]);

  return (
    <div>
      <MetricsGrid metrics={metrics} />
      <OrdersTable orders={recentOrders} />
      <ActivityFeed activity={teamActivity} />
    </div>
  );
}

// Each section can also stream independently:
export default function DashboardPage() {
  return (
    <div>
      <Suspense fallback={<MetricsSkeleton />}>
        <MetricsSection />  {/* fetches independently */}
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <OrdersSection />   {/* streams in when ready */}
      </Suspense>
    </div>
  );
}

import Image from "next/image";

// ✓ Above-the-fold hero image: mark as priority (disables lazy loading)
<Image
  src="/hero.jpg"
  alt="Dashboard overview showing key metrics"
  width={1200}
  height={630}
  priority         // <-- critical for LCP images
  sizes="100vw"
/>

// ✓ Below-the-fold product image: lazy load (default)
<Image
  src={product.imageUrl}
  alt={product.name}
  width={400}
  height={300}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
/>

// ✗ Missing width/height causes CLS (layout shift)
<img src={product.imageUrl} alt={product.name} />

// components/WebVitals.tsx
"use client";

import { useEffect } from "react";
import { onCLS, onINP, onLCP } from "web-vitals";

export function WebVitals() {
  useEffect(() => {
    onLCP((metric) => sendToAnalytics({ name: metric.name, value: metric.value }));
    onCLS((metric) => sendToAnalytics({ name: metric.name, value: metric.value }));
    onINP((metric) => sendToAnalytics({ name: metric.name, value: metric.value }));
  }, []);

  return null;
}

function sendToAnalytics(metric: { name: string; value: number }) {
  // Send to your RUM platform: Datadog, New Relic, custom endpoint, etc.
  navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
}

// ✗ Inaccessible: div-based interactive element
// - Not focusable with Tab
// - Not activatable with Enter/Space
// - No role conveyed to screen readers
<div onClick={handleDelete} className="delete-btn">Delete</div>

// ✓ Accessible: native button
// - Focusable by default
// - Enter/Space activates it
// - Screen reader announces "Delete, button"
<button type="button" onClick={handleDelete}>Delete</button>

// ✗ Inaccessible: no heading structure, no landmark
<div className="header">
  <div className="title">Settings</div>
</div>

// ✓ Accessible: landmarks + heading hierarchy
<header>
  <h1>Settings</h1>
</header>
<main>
  <section aria-labelledby="profile-heading">
    <h2 id="profile-heading">Profile</h2>
  </section>
</main>

// Live regions: announce dynamic content to screen readers
// polite = waits for user to be idle; assertive = interrupts immediately
<div aria-live="polite" aria-atomic="true">
  {statusMessage} {/* updated by state */}
</div>

// Expandable controls
<button
  aria-expanded={isOpen}
  aria-controls="menu-id"
  onClick={() => setIsOpen((v) => !v)}
>
  Options
</button>
<ul id="menu-id" hidden={!isOpen} role="menu">
  <li role="menuitem"><a href="/settings">Settings</a></li>
</ul>

// Decorative images: hide from screen readers
<img src="/decorative-wave.svg" alt="" aria-hidden="true" />

// Visible labels elsewhere: reference with aria-labelledby
<h2 id="section-title">Recent Orders</h2>
<table aria-labelledby="section-title">...</table>

"use client";

import { useRef, useState, KeyboardEvent } from "react";

// Tabs, toolbars, menus: only one item in the tab sequence at a time.
// Arrow keys move focus between items.
export function TabList({ tabs }: { tabs: Tab[] }) {
  const [activeIndex, setActiveIndex] = useState(0);
  const refs = useRef<(HTMLButtonElement | null)[]>([]);

  const handleKeyDown = (e: KeyboardEvent, index: number) => {
    let next = index;
    if (e.key === "ArrowRight") next = (index + 1) % tabs.length;
    if (e.key === "ArrowLeft") next = (index - 1 + tabs.length) % tabs.length;
    if (e.key === "Home") next = 0;
    if (e.key === "End") next = tabs.length - 1;

    if (next !== index) {
      e.preventDefault();
      setActiveIndex(next);
      refs.current[next]?.focus();
    }
  };

  return (
    <div role="tablist">
      {tabs.map((tab, i) => (
        <button
          key={tab.id}
          ref={(el) => { refs.current[i] = el; }}
          role="tab"
          aria-selected={i === activeIndex}
          aria-controls={tab.panelId}
          tabIndex={i === activeIndex ? 0 : -1}
          onKeyDown={(e) => handleKeyDown(e, i)}
          onClick={() => setActiveIndex(i)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}

"use client";

import { useEffect, useRef } from "react";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export function Modal({ isOpen, onClose, title, children }: ModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;

    if (isOpen) {
      // showModal() traps focus and handles Escape natively
      dialog.showModal();
    } else {
      dialog.close();
    }
  }, [isOpen]);

  return (
    // <dialog> natively: traps focus, handles Escape, aria-modal semantics
    <dialog
      ref={dialogRef}
      aria-labelledby="modal-title"
      onClose={onClose}
    >
      <h2 id="modal-title">{title}</h2>
      <div>{children}</div>
      <button type="button" onClick={onClose} autoFocus>
        Close
      </button>
    </dialog>
  );
}

"use client";

import { useState } from "react";

export function SignUpForm() {
  const [errors, setErrors] = useState<Record<string, string>>({});

  return (
    <form noValidate onSubmit={handleSubmit}>
      <div>
        {/* htmlFor links label to input by matching id */}
        <label htmlFor="email">
          Email address
          <span aria-hidden="true"> *</span>
          <span className="sr-only"> (required)</span>
        </label>
        <input
          id="email"
          type="email"
          autoComplete="email"
          required
          aria-required="true"
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? "email-error" : undefined}
        />
        {errors.email && (
          // role="alert" announces immediately; alternatively use aria-live on a container
          <p id="email-error" role="alert" className="error">
            {errors.email}
          </p>
        )}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          autoComplete="new-password"
          required
          aria-required="true"
          aria-invalid={!!errors.password}
          aria-describedby="password-hint"
        />
        {/* Hint text always shown: linked regardless of error state */}
        <p id="password-hint" className="hint">
          At least 8 characters, one uppercase, one number
        </p>
      </div>

      <button type="submit">Create account</button>
    </form>
  );
}

function handleSubmit() { /* ... */ }

// ✗ Each component fetches after mounting: serial round trips
function OrderDetail({ orderId }: { orderId: string }) {
  const [order, setOrder] = useState(null);
  const [customer, setCustomer] = useState(null);

  useEffect(() => {
    fetchOrder(orderId).then(setOrder);
  }, [orderId]);

  useEffect(() => {
    if (order) fetchCustomer(order.customerId).then(setCustomer); // waits for order!
  }, [order]);
}

// ✗ Index as key: re-ordering list forces React to recreate all DOM nodes
{items.map((item, index) => <Row key={index} item={item} />)}

// ✓ Stable unique ID: React reuses existing DOM nodes
{items.map((item) => <Row key={item.id} item={item} />)}

// ✗ Not keyboard focusable, no role, onClick does not fire on Enter
<div onClick={onSubmit} className="submit-btn">Submit order</div>

// ✗ onClick on a non-interactive container
<div onClick={() => navigate("/product/1")}>
  <h3>Product Name</h3>
  <p>Description</p>
</div>

// ✓ Use a link with appropriate semantics
<a href="/product/1">
  <h3>Product Name</h3>
  <p>Description</p>
</a>

// ✓ Built on native <details>/<summary>: keyboard, screen reader, animation-ready
// No JS required for the core behaviour

export function Accordion({ title, children }: AccordionProps) {
  return (
    <details>
      <summary>
        {/* summary is natively focusable, toggled by Enter/Space */}
        {title}
      </summary>
      <div>{children}</div>
    </details>
  );
}

// For custom styling/animation, add "use client" and manage open state,
// but keep the semantic structure: button + region + aria-expanded
"use client";

export function AnimatedAccordion({ title, children }: AccordionProps) {
  const [open, setOpen] = useState(false);
  const panelId = useId();

  return (
    <div>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={panelId}
        onClick={() => setOpen((v) => !v)}
      >
        {title}
      </button>
      <div id={panelId} hidden={!open} role="region" aria-label={title}>
        {children}
      </div>
    </div>
  );
}

"use client";

import { useReducedMotion } from "framer-motion"; // or CSS media query

export function AnimatedCard({ children }: { children: React.ReactNode }) {
  const prefersReduced = useReducedMotion();

  return (
    <motion.div
      initial={prefersReduced ? {} : { opacity: 0, y: 20 }}
      animate={prefersReduced ? {} : { opacity: 1, y: 0 }}
      transition={{ duration: prefersReduced ? 0 : 0.3 }}
    >
      {children}
    </motion.div>
  );
}

// Or with CSS alone (often preferred: no JS required):
// @media (prefers-reduced-motion: reduce) { .animated { animation: none; } }