React

1type Product = { id: string; name: string; price: number };
2function ProductCard({ product, onAdd }: { product: Product; onAdd: (id: string) => void }) {
3  return (
4    <article>
5      <h3>{product.name}</h3>
6      <p>{(product.price / 100).toFixed(2)} USD</p>
7      <button onClick={() => onAdd(product.id)}>Add to cart</button>
8    </article>
9  );
10}
11function ProductGrid({ products }: { products: Product[] }) {
12  const [cart, setCart] = useState<string[]>([]);
13  const add = (id: string) => setCart((prev) => [...prev, id]); // never mutate
14  return (
15    <section>
16      <p>{cart.length} items in cart</p>
17      {products.map((p) => <ProductCard key={p.id} product={p} onAdd={add} />)}
18    </section>
19  );
20}

1function SearchBox({ items }: { items: string[] }) {
2  const [query, setQuery] = useState("");
3  const inputRef = useRef<HTMLInputElement>(null);
4  // Derived during render: no extra state, no effect
5  const results = useMemo(
6    () => items.filter((i) => i.toLowerCase().includes(query.toLowerCase())),
7    [items, query]
8  );
9  // Side effect with cleanup: keyboard shortcut "/" focuses the input
10  useEffect(() => {
11    const onKey = (e: KeyboardEvent) => {
12      if (e.key === "/") { e.preventDefault(); inputRef.current?.focus(); }
13    };
14    window.addEventListener("keydown", onKey);
15    return () => window.removeEventListener("keydown", onKey);
16  }, []);
17 
18  return (<><input ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)} />
19    <ul>{results.map((r) => <li key={r}>{r}</li>)}</ul></>);
20}

1// Zustand: client state, components subscribe to slices
2import { create } from "zustand";
3type CartState = { items: string[]; add: (id: string) => void };
4export const useCart = create<CartState>((set) => ({
5  items: [],
6  add: (id) => set((s) => ({ items: [...s.items, id] })),
7}));
8 
9// TanStack Query: server state with caching and refetching
10import { useQuery } from "@tanstack/react-query";
11function Orders() {
12  const count = useCart((s) => s.items.length); // re-renders only on count change
13  const { data, isPending, error } = useQuery({
14    queryKey: ["orders"],
15    queryFn: () => fetch("/api/orders").then((r) => r.json()),
16  });
17  if (isPending) return <p>Loading...</p>;
18  if (error) return <p>Could not load orders.</p>;
19  return <p>{data.length} orders, {count} items in cart</p>;
20}

1"use client";
2import { useActionState } from "react";
3type State = { error?: string; ok?: boolean };
4async function subscribe(_prev: State, formData: FormData): Promise<State> {
5  const email = String(formData.get("email") ?? "");
6  if (!email.includes("@")) return { error: "Please enter a valid email." };
7  const res = await fetch("/api/subscribe", { method: "POST", body: formData });
8  return res.ok ? { ok: true } : { error: "Something went wrong." };
9}
10export function SubscribeForm() {
11  const [state, action, isPending] = useActionState(subscribe, {});
12  return (
13    <form action={action}>
14      <label htmlFor="email">Email</label> <input id="email" name="email" type="email" required />
15      <button disabled={isPending}>{isPending ? "Sending..." : "Subscribe"}</button>
16      {state.error && <p role="alert">{state.error}</p>}
17      {state.ok && <p role="status">Thanks for subscribing.</p>}
18    </form>
19  );
20}

1// app/products/page.tsx  (Server Component: no "use client")
2import { AddToCartButton } from "./add-to-cart-button";
3 
4export default async function ProductsPage() {
5  const res = await fetch("https://api.example.com/products");
6  const products: { id: string; name: string }[] = await res.json();
7  return (
8    <ul>
9      {products.map((p) => (
10        <li key={p.id}>
11          {p.name} <AddToCartButton id={p.id} />
12        </li>
13      ))}
14    </ul>
15  );
16}
17 
18// add-to-cart-button.tsx starts with "use client" and uses useState/onClick

1import { useDeferredValue, useState, useTransition, memo } from "react";
2 
3function ProductSearch({ products }: { products: { id: string; name: string }[] }) {
4  const [query, setQuery] = useState("");
5  const deferredQuery = useDeferredValue(query); // lags behind while busy
6  const [isPending, startTransition] = useTransition();
7  const [tab, setTab] = useState<"all" | "sale">("all");
8 
9  return (
10    <>
11      <input value={query} onChange={(e) => setQuery(e.target.value)} />
12      <button onClick={() => startTransition(() => setTab("sale"))}>Sale</button>
13      {isPending && <span>Loading...</span>}
14      <Results products={products} query={deferredQuery} tab={tab} />
15    </>
16  );
17}
18const Results = memo(function Results(props: { products: { id: string; name: string }[]; query: string; tab: string }) {
19  return <ul>{props.products.filter((p) => p.name.includes(props.query)).map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
20});

1import { Suspense, useSyncExternalStore } from "react";
2// Same output on server and first client render, then real value
3function useIsClient() {
4  return useSyncExternalStore(
5    () => () => {},
6    () => true,   // client snapshot
7    () => false,  // server snapshot
8  );
9}
10function LocalTime({ iso }: { iso: string }) {
11  const isClient = useIsClient();
12  return <time dateTime={iso}>{isClient ? new Date(iso).toLocaleString() : iso.slice(0, 10)}</time>;
13}
14function Page() {
15  return <main><ProductDetails /><Suspense fallback={<p>Loading reviews...</p>}><Reviews /></Suspense></main>;
16}

1// Breaks the rules: mutating during render, so the compiler skips this component
2function CartTotal({ items }: { items: { price: number; qty: number }[] }) {
3  items.sort((a, b) => b.price - a.price); // mutates a prop!
4  return <p>{items.reduce((sum, i) => sum + i.price * i.qty, 0)}</p>;
5}
6 
7// Follows the rules: derive a new array, no manual memo needed with the compiler
8function CartTotalFixed({ items }: { items: { price: number; qty: number }[] }) {
9  const sorted = items.toSorted((a, b) => b.price - a.price);
10  const total = sorted.reduce((sum, i) => sum + i.price * i.qty, 0);
11  return <p>{total}</p>;
12}
13 
14// next.config.ts:  { reactCompiler: true }
15// Vite: babel-plugin-react-compiler in the React plugin's babel options

1import { lazy, Suspense, useState } from "react";
2 
3// Code-split a heavy screen: loaded only when first rendered
4const ReportsChart = lazy(() => import("./reports-chart"));
5 
6export function Dashboard() {
7  const [showReports, setShowReports] = useState(false);
8  return (
9    <section>
10      <button onClick={() => setShowReports(true)}>Show reports</button>
11      {showReports && (
12        <Suspense fallback={<p>Loading chart...</p>}>
13          <ReportsChart />
14        </Suspense>
15      )}
16    </section>
17  );
18}