React hooks

import { useEffect, useState } from "react";
 
function Profile({ id }: { id: string | null }) {
  // ❌ conditional hook: order changes when id flips
  // if (!id) return null;
  // const [tab, setTab] = useState("posts");
 
  // ✅ hooks first, branch afterward
  const [tab, setTab] = useState("posts");
  useEffect(() => {
    if (!id) return; // condition inside the hook
    document.title = `${id} · ${tab}`;
  }, [id, tab]);
 
  if (!id) return null;
  return (
    <button onClick={() => setTab("likes")}>{tab}</button>
  );
}

import { useReducer, useState } from "react";
 
type Cart = { items: Record<string, number> };
type Act =
  | { type: "add"; sku: string }
  | { type: "remove"; sku: string };
 
function reducer(s: Cart, a: Act): Cart {
  const n = s.items[a.sku] ?? 0;
  const next = a.type === "add" ? n + 1 : n - 1;
  const { [a.sku]: _, ...rest } = s.items;
  return {
    items: next > 0 ? { ...rest, [a.sku]: next } : rest,
  };
}
 
const init = (skus: string[]): Cart => ({
  items: Object.fromEntries(skus.map((s) => [s, 1])),
});
 
function Checkout({ saved }: { saved: string[] }) {
  // lazy initializer: reads storage once, not every render
  const [note, setNote] = useState(
    () => localStorage.getItem("note") ?? "",
  );
  // object state: replace, never mutate
  const [form, setForm] = useState({ name: "", age: 0 });
  // init(saved) runs once
  const [cart, dispatch] = useReducer(reducer, saved, init);
 
  return (
    <form>
      <input value={form.name} onChange={(e) =>
        setForm((f) => ({ ...f, name: e.target.value }))} />
      <textarea value={note}
        onChange={(e) => setNote(e.target.value)} />
      <button type="button"
        onClick={() => dispatch({ type: "add", sku: "b2" })}>
        Add ({Object.keys(cart.items).length})
      </button>
    </form>
  );
}

import { createContext, use, useContext } from "react";
import type { ReactNode } from "react";
 
const Locale = createContext("en");
 
function Price(p: { cents: number; showLocale: boolean }) {
  const fmt = (l: string) =>
    new Intl.NumberFormat(l, {
      style: "currency",
      currency: "EUR",
    }).format(p.cents / 100);
 
  if (!p.showLocale) return <span>{fmt("en")}</span>;
  const locale = use(Locale); // fine after an early return
  return <span>{fmt(locale)}</span>;
}
 
function Header(): ReactNode {
  const locale = useContext(Locale); // top level only
  return <p lang={locale}>{locale}</p>;
}

import { useRef } from "react";
 
class VideoPlayer {
  constructor(readonly src: string) {}
  play() {}
}
 
function Player({ src }: { src: string }) {
  // lazy init: construct once, not every render
  const player = useRef<VideoPlayer | null>(null);
  if (player.current === null) {
    player.current = new VideoPlayer(src);
  }
  const box = useRef<HTMLDivElement>(null);
 
  return (
    <div ref={box} onClick={() => player.current?.play()} />
  );
}

import {
  useEffect,
  useEffectEvent,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
 
function Tooltip({ text }: { text: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [above, setAbove] = useState(false);
 
  // measure before paint: no flicker at the wrong spot
  useLayoutEffect(() => {
    const r = ref.current?.getBoundingClientRect();
    if (r) setAbove(r.bottom > window.innerHeight);
  }, [text]);
 
  return (
    <div ref={ref} data-above={above}>{text}</div>
  );
}
 
function Tracker(p: { page: string; userId: string }) {
  // latest userId, but only a page change re-logs
  const log = useEffectEvent((page: string) => {
    navigator.sendBeacon("/log", `${p.userId}:${page}`);
  });
  useEffect(() => log(p.page), [p.page]);
  return null;
}

import { useEffect, useState } from "react";
 
type Opts = { url: string; room: string };
declare function createConn(o: Opts): {
  connect(): void;
  disconnect(): void;
};
 
function Chat({ url, room }: Opts) {
  // ❌ options = { url, room } in render: new object each
  //    render, so the effect reconnects every render
 
  useEffect(() => {
    const conn = createConn({ url, room }); // ✅ inside
    conn.connect();
    return () => conn.disconnect();
  }, [url, room]);
 
  return <h2>{room}</h2>;
}
 
function Bio({ id }: { id: string }) {
  const [bio, setBio] = useState<string | null>(null);
  useEffect(() => {
    let ignore = false; // guards against stale responses
    fetch(`/api/bio/${id}`)
      .then((r) => r.text())
      .then((t) => {
        if (!ignore) setBio(t);
      })
      .catch(() => {});
    return () => {
      ignore = true;
    };
  }, [id]);
  return <p>{bio ?? "Loading..."}</p>;
}

import {
  memo,
  useDeferredValue,
  useState,
  useTransition,
} from "react";
 
declare function search(q: string): string[]; // slow
declare function save(text: string): Promise<void>;
 
const Results = memo(function Results(p: { q: string }) {
  const rows = search(p.q);
  return <ul>{rows.map((r) => <li key={r}>{r}</li>)}</ul>;
});
 
function Search() {
  const [q, setQ] = useState("");
  const deferred = useDeferredValue(q); // lags while typing
  const stale = q !== deferred;
  return (
    <>
      <input
        value={q}
        onChange={(e) => setQ(e.target.value)}
      />
      <div style={{ opacity: stale ? 0.5 : 1 }}>
        <Results q={deferred} />
      </div>
    </>
  );
}
 
function SaveButton({ text }: { text: string }) {
  const [isPending, startTransition] = useTransition();
  return (
    <button
      disabled={isPending}
      onClick={() => startTransition(() => save(text))}
    >
      {isPending ? "Saving..." : "Save"}
    </button>
  );
}

import {
  useDebugValue,
  useId,
  useSyncExternalStore,
} from "react";
 
function Field({ label }: { label: string }) {
  const id = useId(); // stable, matches server and client
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} aria-describedby={`${id}-hint`} />
      <small id={`${id}-hint`}>Required</small>
    </>
  );
}
 
function subscribe(onChange: () => void) {
  window.addEventListener("online", onChange);
  window.addEventListener("offline", onChange);
  return () => {
    window.removeEventListener("online", onChange);
    window.removeEventListener("offline", onChange);
  };
}
 
export function useOnline(): boolean {
  const online = useSyncExternalStore(
    subscribe, // stable: declared outside the component
    () => navigator.onLine, // client snapshot
    () => true, // server snapshot (SSR, hydration)
  );
  useDebugValue(online ? "Online" : "Offline");
  return online;
}

import { startTransition, useActionState } from "react";
import { useFormStatus } from "react-dom";
 
declare function addToCart(sku: string): Promise<number>;
 
function AddButton({ sku }: { sku: string }) {
  const [count, add, isPending] = useActionState(
    async (_prev: number, s: string) => addToCart(s),
    0,
  );
  return (
    <button
      disabled={isPending}
      // outside a form: dispatch inside a transition
      onClick={() => startTransition(() => add(sku))}
    >
      In cart: {count}
    </button>
  );
}
 
function Submit() {
  const { pending, data } = useFormStatus(); // parent form
  const email = data?.get("email");
  return (
    <button disabled={pending}>
      {pending ? `Sending ${String(email)}...` : "Send"}
    </button>
  );
}

import { expect, test } from "bun:test";
import { renderHook } from "@testing-library/react";
import { usePrevious } from "./use-previous";
 
test("returns the previous distinct value", () => {
  const { result, rerender } = renderHook(
    ({ v }) => usePrevious(v),
    { initialProps: { v: 1 } },
  );
  expect(result.current).toBeUndefined();
  rerender({ v: 2 });
  expect(result.current).toBe(1);
  rerender({ v: 2 }); // same value: unchanged
  expect(result.current).toBe(1);
});

bun add -d eslint eslint-plugin-react-hooks

import reactHooks from "eslint-plugin-react-hooks";
import { defineConfig } from "eslint/config";
 
export default defineConfig([
  reactHooks.configs.flat.recommended,
  {
    rules: {
      "react-hooks/exhaustive-deps": [
        "warn",
        { additionalHooks: "(useIsomorphicLayoutEffect)" },
      ],
    },
  },
]);

import { useEffect, useState } from "react";
 
export function useDebounce<T>(value: T, ms = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return debounced;
}
 
// const q = useDebounce(input, 250);

import { useCallback, useSyncExternalStore } from "react";
const EVT = "local-storage"; // same-tab updates
function subscribe(cb: () => void) {
  const ac = new AbortController();
  const opts = { signal: ac.signal };
  addEventListener("storage", cb, opts); // other tabs
  addEventListener(EVT, cb, opts);
  return () => ac.abort();
}
export function useLocalStorage<T>(key: string, init: T) {
  const raw = useSyncExternalStore(
    subscribe,
    () => localStorage.getItem(key),
    () => null, // server snapshot
  );
  let value = init;
  try {
    if (raw !== null) value = JSON.parse(raw) as T;
  } catch {} // corrupt entry: fall back
  const set = useCallback((next: T) => {
    localStorage.setItem(key, JSON.stringify(next));
    dispatchEvent(new Event(EVT));
  }, [key]);
  return [value, set] as const;
}

import { useCallback, useSyncExternalStore } from "react";
 
export function useMediaQuery(query: string, ssr = false) {
  const subscribe = useCallback(
    (cb: () => void) => {
      const mql = matchMedia(query);
      mql.addEventListener("change", cb);
      return () => mql.removeEventListener("change", cb);
    },
    [query],
  );
  return useSyncExternalStore(
    subscribe,
    () => matchMedia(query).matches,
    () => ssr, // server guess
  );
}
 
// const reduce = useMediaQuery("(prefers-reduced-motion)");

import { useEffect, useEffectEvent } from "react";
 
export function useInterval(
  callback: () => void,
  ms: number | null,
): void {
  const tick = useEffectEvent(callback);
  useEffect(() => {
    if (ms === null) return; // paused
    const id = setInterval(() => tick(), ms);
    return () => clearInterval(id);
  }, [ms]);
}
 
// useInterval(() => setSecs(secs + 1),
//   running ? 1000 : null);

import { useState } from "react";
 
export function usePrevious<T>(value: T): T | undefined {
  const [current, setCurrent] = useState(value);
  const [previous, setPrevious] = useState<T>();
  if (!Object.is(current, value)) {
    // adjusting state during render: React re-renders
    // immediately, before children, with no extra paint
    setPrevious(current);
    setCurrent(value);
  }
  return previous;
}

import { useEffect, useEffectEvent } from "react";
import type { RefObject } from "react";
 
export function useOnClickOutside(
  ref: RefObject<HTMLElement | null>,
  handler: (e: PointerEvent) => void,
): void {
  const onOutside = useEffectEvent(handler);
  useEffect(() => {
    const listener = (e: PointerEvent) => {
      const el = ref.current;
      // composedPath also works across shadow DOM
      if (el && !e.composedPath().includes(el)) {
        onOutside(e);
      }
    };
    document.addEventListener("pointerdown", listener);
    return () =>
      document.removeEventListener("pointerdown", listener);
  }, [ref]);
}

import { useEffect, useEffectEvent, useState } from "react";
type State<T> = { status: "loading" }
  | { status: "ok"; data: T }
  | { status: "error"; error: unknown };
export function useFetch<T>(
  url: string, parse: (json: unknown) => T, // Schema.parse
): State<T> {
  const [res, setRes] = useState<[string, State<T>]>();
  const toData = useEffectEvent(parse);
  useEffect(() => {
    const ctrl = new AbortController();
    const settle = (s: State<T>) => {
      if (!ctrl.signal.aborted) setRes([url, s]);
    };
    fetch(url, { signal: ctrl.signal })
      .then(async (r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const data = toData(await r.json());
        settle({ status: "ok", data });
      })
      .catch((error) => settle({ status: "error", error }));
    return () => ctrl.abort();
  }, [url]);
  return res?.[0] === url ? res[1] : { status: "loading" };
}

import { useEffect, useEffectEvent } from "react";
 
export function useEventListener<
  K extends keyof WindowEventMap,
>(
  type: K,
  handler: (e: WindowEventMap[K]) => void,
  { capture, passive }: AddEventListenerOptions = {},
): void {
  const onEvent = useEffectEvent(handler);
  useEffect(() => {
    const opts = { capture, passive };
    const listener = (e: WindowEventMap[K]) => onEvent(e);
    addEventListener(type, listener, opts);
    return () => removeEventListener(type, listener, opts);
  }, [type, capture, passive]);
}
 
// useEventListener("keydown", (e) => e.key === "Escape"
//   && close());