Quick review

const values = ["hi", 42, 10n, true, undefined, Symbol("id"), null, {}, [], () => {}];
for (const value of values) console.log(typeof value);

let notSet;
const user = { name: "Ada", nickname: null };
console.log(notSet, user.age, user.nickname);
console.log(null == undefined, null === undefined);
console.log(JSON.stringify({ a: undefined, b: null }));
const greet = (name = "friend") => "hi " + name;
console.log(greet(undefined), greet(null));

console.log(NaN === NaN);
console.log(Number.isNaN(NaN), Number.isNaN("abc"));
console.log(isNaN("abc"));
console.log(Object.is(NaN, NaN));
console.log([NaN].includes(NaN), [NaN].indexOf(NaN));
console.log(typeof NaN);

const falsy = [false, 0, -0, 0n, "", null, undefined, NaN];
console.log(falsy.every((value) => !value));
const surprising = ["0", "false", " ", [], {}, () => {}];
console.log(surprising.every((value) => Boolean(value)));

console.log(0 == "", "0" == false, [] == false);
console.log(null == 0, null == undefined, NaN == NaN);
console.log("1" === 1, 1 === 1);

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);
console.log((0.1).toPrecision(21));
const nearlyEqual = (x, y) => Math.abs(x - y) <= Number.EPSILON * Math.max(Math.abs(x), Math.abs(y));
console.log(nearlyEqual(0.1 + 0.2, 0.3));
console.log((10 + 20) / 100 === 0.3);

const log = (label, value) => {
  console.log("evaluated " + label);
  return value;
};
console.log(log("a", 0) && log("b", 1));
console.log(log("c", 0) || log("d", "fallback"));
console.log(0 ?? "fallback", null ?? "fallback");

let i = 0;
const a = i++;
console.log(a, i);
let j = 0;
const b = ++j;
console.log(b, j);

const max = (a, b) => (a > b ? a : b);
let label;
if (max(2, 3) > 2) {
  label = "big";
} else {
  label = "small";
}
const sameLabel = max(2, 3) > 2 ? "big" : "small";
console.log(label === sameLabel);

// Does not compile: if is a statement, and braces in JSX take an expression.
<p>{if (done) { "Done" }}</p>

// Compiles: the ternary is an expression.
<p>{done ? "Done" : "Pending"}</p>

const a = 1
try {
  const b = a
  [1, 2].forEach((n) => console.log(n))
} catch (error) {
  console.log(error.constructor.name)
}

// ES modules are strict, so this file runs in strict mode.
try {
  undeclared = 1;
} catch (error) {
  console.log(error.name);
}
const frozen = Object.freeze({ count: 1 });
try {
  frozen.count = 2;
} catch (error) {
  console.log(error.name);
}
function whoAmI() {
  return this;
}
console.log(whoAmI());

for (var i = 0; i < 3; i++) setTimeout(() => console.log("var", i));
for (let j = 0; j < 3; j++) setTimeout(() => console.log("let", j));

console.log(typeof hoisted, typeof notYet);
function hoisted() {}
var notYet = function () {};
try {
  console.log(later);
} catch (error) {
  console.log(error.name);
}
let later = 1;

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "inside run";
  return show();
}
console.log(run());

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    current: () => count,
  };
}
const a = createCounter();
const b = createCounter();
a.increment();
a.increment();
b.increment();
console.log(a.current(), b.current());
console.log(a.count);

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}
const init = once(() => {
  console.log("initialising");
  return 42;
});
console.log(init(), init());

function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    // This closure captured the first render's `seconds` (0) forever.
    const id = setInterval(() => setSeconds(seconds + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <p>{seconds}</p>;
}

const counterModule = (() => {
  let count = 0;
  return { next: () => ++count };
})();
console.log(counterModule.next(), counterModule.next());
console.log(typeof count);

function greet(name, greeting = "Hello") {
  return greeting + ", " + name;
}
console.log(greet("Ada"));
console.log(greet("Ada", "Hi", "extra"));
console.log(greet.length);
function count(...args) {
  return args.length;
}
console.log(count(1, 2, 3));

const literal = { name: "Ada" };

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hi, " + this.name;
  }
}
const fromClass = new Person("Grace");

function createPerson(name) {
  return { greet: () => "Hi, " + name };
}
const fromFactory = createPerson("Linus");

const proto = { greet() { return "Hi, " + this.name; } };
const fromCreate = Object.create(proto);
fromCreate.name = "Barbara";

const dictionary = Object.create(null);
console.log(literal.name, fromClass.greet(), fromFactory.greet(), fromCreate.greet());
console.log("toString" in literal, "toString" in dictionary);

const user = {
  name: "Ada",
  regular() {
    return this?.name;
  },
  arrow: () => typeof this,
  later() {
    return [1].map(() => this.name);
  },
};
const detached = user.regular;
console.log(user.regular());
console.log(detached());
console.log(detached.call({ name: "Grace" }));
console.log(user.arrow());
console.log(user.later());
function Person(name) {
  this.name = name;
}
console.log(new Person("Linus").name);

const animal = {
  speak() {
    return this.name + " makes a sound";
  },
};
const dog = Object.create(animal);
dog.name = "Rex";
console.log(dog.speak());
console.log(Object.getPrototypeOf(dog) === animal, Object.hasOwn(dog, "speak"));

class Cat {
  constructor(name) {
    this.name = name;
  }
  meow() {
    return "meow";
  }
}
const tom = new Cat("Tom");
console.log(Object.getPrototypeOf(tom) === Cat.prototype, typeof Cat);
console.log(Object.getPrototypeOf(Cat.prototype) === Object.prototype);

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }
  static fromFahrenheit(fahrenheit) {
    return new Temperature(((fahrenheit - 32) * 5) / 9);
  }
  toFahrenheit() {
    return (this.celsius * 9) / 5 + 32;
  }
}
const boiling = Temperature.fromFahrenheit(212);
console.log(boiling.celsius, boiling.toFahrenheit());
console.log(typeof boiling.fromFahrenheit, Object.hasOwn(Temperature, "fromFahrenheit"));
console.log(Object.hasOwn(Temperature.prototype, "toFahrenheit"));

function update(n, list, user) {
  n += 1;
  list.push(4);
  user = { name: "replaced" };
}
const n = 1;
const list = [1, 2, 3];
const user = { name: "Ada" };
update(n, list, user);
console.log(n, list.length, user.name);

const original = { name: "Ada", tags: ["math"], born: new Date(Date.UTC(1815, 11, 10)) };
const shallow = { ...original };
const deep = structuredClone(original);
shallow.tags.push("poetry");
console.log(original.tags.length, deep.tags.length);
console.log(deep.born instanceof Date, typeof JSON.parse(JSON.stringify(original)).born);

const a = { x: 1, y: { z: 2 } };
const b = { x: 1, y: { z: 2 } };
console.log(a === b, a === a);

function deepEqual(left, right) {
  if (Object.is(left, right)) return true;
  if (typeof left !== "object" || typeof right !== "object" || left === null || right === null) return false;
  if (Array.isArray(left) !== Array.isArray(right)) return false;
  const keys = Object.keys(left);
  if (keys.length !== Object.keys(right).length) return false;
  return keys.every((key) => Object.hasOwn(right, key) && deepEqual(left[key], right[key]));
}
console.log(deepEqual(a, b), deepEqual({ x: 1 }, { x: 2 }));
console.log(JSON.stringify({ x: 1, y: 2 }) === JSON.stringify({ y: 2, x: 1 }));

const scores = [3, 1, 2];
const sorted = scores.toSorted();
console.log(scores, sorted);
scores.sort();
console.log(scores);
const name = "ada";
name.toUpperCase();
console.log(name);
const frozen = Object.freeze({ list: [1] });
frozen.list.push(2);
console.log(frozen.list.length);

const orders = [
  { item: "book", price: 12, paid: true },
  { item: "pen", price: 2, paid: false },
  { item: "lamp", price: 30, paid: true },
];
const paidTotal = orders
  .filter((order) => order.paid)
  .map((order) => order.price)
  .reduce((sum, price) => sum + price, 0);
console.log(paidTotal);

let total = 0;
function addToTotal(amount) {
  total += amount; // side effect: changes outside state
  return total;
}
console.log(addToTotal(5), addToTotal(5));

const add = (a, b) => a + b;
console.log(add(5, 5), add(5, 5));

const tags = ["b", "a"];
const sortedImpure = (list) => list.sort(); // mutates its argument
const sortedPure = (list) => list.toSorted();
console.log(sortedPure(tags), tags);
sortedImpure(tags);
console.log(tags);

const numbers = [1, 2, 3, 4, 5, 6];

const evensImperative = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) evensImperative.push(numbers[i] * 10);
}

const evensDeclarative = numbers.filter((n) => n % 2 === 0).map((n) => n * 10);

console.log(evensImperative, evensDeclarative);

function TodoCount({ todos }: { todos: { done: boolean }[] }) {
  const left = todos.filter((todo) => !todo.done).length;
  // Declarative: describe the text for this state. React updates the DOM.
  return <p className={left === 0 ? "done" : undefined}>{left} left</p>;
}

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
const nothing = numbers.forEach((n) => n * 2);
console.log(doubled, nothing, numbers);

function memoize(fn) {
  const cache = new Map();
  return (n) => {
    if (!cache.has(n)) cache.set(n, fn(n));
    return cache.get(n);
  };
}
let calls = 0;
const slowSquare = (n) => {
  calls += 1;
  return n * n;
};
const fastSquare = memoize(slowSquare);
console.log(fastSquare(9), fastSquare(9), calls);

const fib = memoize((n) => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
console.log(fib(50));

const tree = {
  name: "root",
  children: [
    { name: "a", children: [{ name: "a1", children: [] }] },
    { name: "b", children: [] },
  ],
};
const count = (node) => 1 + node.children.reduce((sum, child) => sum + count(child), 0);
console.log(count(tree));

const flatten = (value) => (Array.isArray(value) ? value.flatMap(flatten) : [value]);
console.log(flatten([1, [2, [3, [4]]], 5]));

console.log("1 sync");
setTimeout(() => console.log("4 timeout"), 0);
Promise.resolve().then(() => console.log("3 microtask"));
console.log("2 sync");

const numbers = [1, 2, 3];
console.log(numbers.map((n) => n * 10));

function fetchUser(id, onDone) {
  setTimeout(() => onDone({ id, name: "Ada" }), 10);
}
fetchUser(1, (user) => console.log("loaded", user.name));
console.log("requested");

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

wait(20, 2)
  .then((n) => n * 10)
  .then((n) => {
    throw new Error("too big: " + n);
  })
  .catch((error) => console.log("caught", error.message))
  .finally(() => console.log("done"));

const results = await Promise.allSettled([wait(5, "ok"), Promise.reject(new Error("no"))]);
console.log(results.map((result) => result.status));

const p = new Promise((resolve, reject) => {
  resolve("first");
  reject(new Error("ignored"));
  resolve("ignored too");
});
p.then((value) => console.log(value));

const pending = new Promise(() => {});
console.log(Promise.resolve(pending) === pending);

function createEmitter() {
  const handlers = new Map();
  return {
    on(type, handler) {
      if (!handlers.has(type)) handlers.set(type, new Set());
      handlers.get(type).add(handler);
      return () => handlers.get(type).delete(handler);
    },
    emit(type, payload) {
      for (const handler of handlers.get(type) ?? []) handler(payload);
    },
  };
}
const hub = createEmitter();
const off = hub.on("message", (text) => console.log("A got", text));
hub.on("message", (text) => console.log("B got", text));
hub.emit("message", "hi");
off();
hub.emit("message", "bye");
hub.emit("nobody-listens", "...");

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
const search = debounce((query) => console.log("search", query), 50);
search("r");
search("re");
search("react");
setTimeout(() => search("vue"), 100);

function useDebouncedValue<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

<ul id="todo-list">
  <li data-id="1">Buy milk <button class="remove">×</button></li>
  <li data-id="2">Walk dog <button class="remove">×</button></li>
</ul>

const list = document.getElementById("todo-list");
list.addEventListener("click", (event) => {
  const button = event.target.closest("button.remove");
  if (!button || !list.contains(button)) return;
  button.closest("li").remove();
});

GET /api/profile HTTP/1.1
Host: api.example.com
Origin: https://app.example.com

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com
Vary: Origin

const response = new Response(JSON.stringify({ ok: true }), {
  headers: { "Content-Type": "application/json; charset=utf-8" },
});
console.log(response.headers.get("content-type"));
const blob = new Blob(["<p>hi</p>"], { type: "text/html" });
console.log(blob.type, blob.size);

// Imperative: you track and patch every piece of the DOM yourself.
let count = 0;
const label = document.querySelector("#count");
const button = document.querySelector("#add");
button.addEventListener("click", () => {
  count += 1;
  label.textContent = String(count);
  label.classList.toggle("many", count > 9);
  button.disabled = count >= 20;
});

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <span className={count > 9 ? "many" : undefined}>{count}</span>
      <button disabled={count >= 20} onClick={() => setCount(count + 1)}>Add</button>
    </>
  );
}

const element = (
  <ul className="list">
    <li>a</li>
  </ul>
);
// JSX compiles to calls that return plain objects, roughly:
// { type: "ul", props: { className: "list", children: { type: "li", props: { children: "a" } } } }
console.log(element.type, typeof element.props);

function fibonacci(n) {
  const sequence = [];
  for (let i = 0; i < n; i++) {
    sequence.push(i < 2 ? i : sequence[i - 1] + sequence[i - 2]);
  }
  return sequence;
}
console.log(fibonacci(10).join(" "));
console.log(fibonacci(1), fibonacci(0));

const fibonacciBig = (n) => {
  const sequence = [0n, 1n].slice(0, n);
  while (sequence.length < n) sequence.push(sequence.at(-1) + sequence.at(-2));
  return sequence;
};
console.log(String(fibonacciBig(100).at(-1)));

const hasDuplicateQuadratic = (items) =>
  items.some((item, i) => items.some((other, j) => i !== j && item === other));
const hasDuplicateLinear = (items) => new Set(items).size !== items.length;

const data = Array.from({ length: 5000 }, (_, i) => i);
console.log(hasDuplicateQuadratic(data), hasDuplicateLinear(data));

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

const element = <Greeting name="Ada" />;
console.log(element.type === Greeting, element.props.name);

const host = <h1 className="title">Hi</h1>;
console.log(host.type, host.props.className);

function Field() {
  return (
    <div className="field">
      <label htmlFor="email">Email</label>
      <input id="email" type="email" tabIndex={0} />
    </div>
  );
}

function Card() {
  return (
    <div
      // A comment between props works too.
      className="card"
    >
      {/* A comment among the children needs braces. */}
      <h2>Title</h2>
      {
        // A line comment also works, but the closing brace must be on its own line.
      }
    </div>
  );
}

function Columns() {
  return (
    <>
      <td>Name</td>
      <td>Role</td>
    </>
  );
}

function Glossary({ terms }: { terms: { id: string; term: string; meaning: string }[] }) {
  return (
    <dl>
      {terms.map((item) => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.meaning}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

function Card({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

function Profile() {
  return (
    <Card title="Ada Lovelace">
      <p>Mathematician.</p>
      <a href="/ada">Read more</a>
    </Card>
  );
}

function Inbox({ messages, loading }: { messages: string[]; loading: boolean }) {
  if (loading) return <p>Loading…</p>;

  return (
    <section>
      {messages.length > 0 && <span className="badge">{messages.length}</span>}
      {messages.length === 0 ? <p>No messages</p> : <ul>{messages.map((m) => <li key={m}>{m}</li>)}</ul>}
    </section>
  );
}

// Renders a stray "0" when the list is empty: 0 is falsy, but React renders numbers.
{messages.length && <span className="badge">{messages.length}</span>}

function TodoList({ todos }: { todos: { id: string; text: string }[] }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input type="checkbox" /> {todo.text}
        </li>
      ))}
    </ul>
  );
}

function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes((current) => current + 1)}>♥ {likes}</button>;
}

function Avatar({ name, src, size = 40 }: { name: string; src: string; size?: number }) {
  return <img src={src} alt={name} width={size} height={size} className="avatar" />;
}

function TemperatureInput({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
  return (
    <label>
      {label} <input value={value} onChange={(event) => onChange(event.target.value)} />
    </label>
  );
}

function Converter() {
  const [celsius, setCelsius] = useState("20");
  const fahrenheit = celsius === "" ? "" : String((Number(celsius) * 9) / 5 + 32);
  return (
    <>
      <TemperatureInput label="°C" value={celsius} onChange={setCelsius} />
      <TemperatureInput
        label="°F"
        value={fahrenheit}
        onChange={(f) => setCelsius(f === "" ? "" : String(((Number(f) - 32) * 5) / 9))}
      />
    </>
  );
}

<button onclick="save(); return false;">Save</button>
<form onsubmit="return validate()">...</form>

function SaveForm({ onSave }: { onSave: (data: FormData) => void }) {
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    onSave(new FormData(event.currentTarget));
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="title" />
      <button type="submit">Save</button>
    </form>
  );
}

function Items({ items, remove }: { items: { id: string; label: string }[]; remove: (id: string) => void }) {
  const removeById = (event: React.MouseEvent<HTMLButtonElement>) => {
    const id = event.currentTarget.dataset.id;
    if (id) remove(id);
  };
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.label}
          <button onClick={() => remove(item.id)}>Remove</button>
          <button data-id={item.id} onClick={removeById}>Remove (dataset)</button>
        </li>
      ))}
    </ul>
  );
}

function SearchBox() {
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <input ref={inputRef} placeholder="Search" />
      <button onClick={() => inputRef.current?.focus()}>Focus search</button>
    </>
  );
}

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const timerRef = useRef<number | null>(null); // survives renders, never shown

  function start() {
    if (timerRef.current !== null) return;
    timerRef.current = window.setInterval(() => setSeconds((s) => s + 1), 1000);
  }
  function stop() {
    if (timerRef.current !== null) window.clearInterval(timerRef.current);
    timerRef.current = null;
  }
  return (
    <p>
      {seconds}s <button onClick={start}>Start</button> <button onClick={stop}>Stop</button>
    </p>
  );
}

function MeasuredBox({ children }: { children: ReactNode }) {
  const [height, setHeight] = useState(0);

  const measure = useCallback((node: HTMLDivElement | null) => {
    if (!node) return;
    const observer = new ResizeObserver(() => setHeight(node.getBoundingClientRect().height));
    observer.observe(node);
    return () => observer.disconnect(); // React 19: cleanup when the node detaches
  }, []);

  return (
    <div ref={measure}>
      {children}
      <small>{Math.round(height)} px tall</small>
    </div>
  );
}

import { createPortal } from "react-dom";

function Modal({ open, onClose, children }: { open: boolean; onClose: () => void; children: ReactNode }) {
  if (!open) return null;
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div role="dialog" aria-modal="true" className="modal" onClick={(event) => event.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body,
  );
}

function Clock({ timezone }: { timezone: string }) {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    // Mount, and every time `timezone` changes: set up.
    const id = setInterval(() => setNow(new Date()), 1000);
    // Before the next setup, and on unmount: clean up.
    return () => clearInterval(id);
  }, [timezone]);

  return <time>{now.toLocaleTimeString("en-US", { timeZone: timezone })}</time>;
}

class Chat extends Component<{ roomId: string }> {
  componentDidMount() {
    console.log("connect", this.props.roomId);
  }
  componentDidUpdate(prevProps: { roomId: string }) {
    if (prevProps.roomId !== this.props.roomId) {
      console.log("disconnect", prevProps.roomId);
      console.log("connect", this.props.roomId);
    }
  }
  componentWillUnmount() {
    console.log("disconnect", this.props.roomId);
  }
  render() {
    return <h1>Room {this.props.roomId}</h1>;
  }
}

class Search extends Component<{}, { query: string }> {
  state = { query: "" };

  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ query: event.target.value }, () => {
      // Runs after the re-render: this.state.query is the new value here.
      console.log("searching for", this.state.query);
    });
    console.log("still the old value:", this.state.query);
  };

  render() {
    return <input value={this.state.query} onChange={this.handleChange} />;
  }
}

function SearchBox({ onSearch }: { onSearch: (query: string) => void }) {
  const [query, setQuery] = useState("");

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const next = event.target.value;
    setQuery(next);
    onSearch(next); // use the value you already have, not `query`
  }

  return <input value={query} onChange={handleChange} />;
}

class Toggle extends Component<{}, { on: boolean }> {
  state = { on: false };

  constructor(props: {}) {
    super(props);
    this.handleBound = this.handleBound.bind(this);
  }

  handleBound() {
    this.setState((s) => ({ on: !s.on }));
  }

  handleField = () => {
    this.setState((s) => ({ on: !s.on }));
  };

  handleUnbound() {
    this.setState((s) => ({ on: !s.on })); // TypeError when passed as onClick={this.handleUnbound}
  }

  render() {
    return (
      <>
        <button onClick={this.handleBound}>bind in constructor</button>
        <button onClick={this.handleField}>class field arrow</button>
        <button onClick={() => this.handleUnbound()}>inline arrow</button>
      </>
    );
  }
}

class ErrorBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { failed: boolean }> {
  state = { failed: false };

  static getDerivedStateFromError() {
    return { failed: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("render failed", error, info.componentStack);
  }

  render() {
    return this.state.failed ? this.props.fallback : this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong.</p>}>
      <Dashboard />
    </ErrorBoundary>
  );
}

type Theme = "light" | "dark";
const ThemeContext = createContext<Theme>("light");

function App() {
  const [theme, setTheme] = useState<Theme>("dark");
  return (
    <ThemeContext value={theme}>
      <Toolbar />
      <button onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}>Toggle</button>
    </ThemeContext>
  );
}

function Toolbar() {
  return <ThemedButton />; // passes nothing down
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={"button-" + theme}>Save</button>;
}

function withLogging<P extends object>(Wrapped: React.ComponentType<P>) {
  function WithLogging(props: P) {
    useEffect(() => {
      console.log((Wrapped.displayName ?? Wrapped.name) + " mounted");
    }, []);
    return <Wrapped {...props} />;
  }
  WithLogging.displayName = "withLogging(" + (Wrapped.displayName ?? Wrapped.name) + ")";
  return WithLogging;
}

function Profile({ name }: { name: string }) {
  return <h1>{name}</h1>;
}

const LoggedProfile = withLogging(Profile);
const page = <LoggedProfile name="Ada" />;

interface UserCardProps {
  name: string;
  age?: number;
  role: "admin" | "member";
  onSelect: (name: string) => void;
}

function UserCard({ name, age = 0, role, onSelect }: UserCardProps) {
  return (
    <button onClick={() => onSelect(name)}>
      {name} ({role}){age > 0 ? ", " + age : ""}
    </button>
  );
}

const ok = <UserCard name="Ada" role="admin" onSelect={() => {}} />;
const wrong = <UserCard name="Ada" role="owner" onSelect={() => {}} />; // error

import { z } from "zod";

const User = z.object({ name: z.string(), age: z.number().int().nonnegative() });
type User = z.infer<typeof User>;

async function loadUser(id: string): Promise<User> {
  const response = await fetch("/api/users/" + id);
  return User.parse(await response.json()); // throws if the server sends something else
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid;
  margin: 24px;
}
/* content-box: rendered width = 200 + 2×16 + 2×2 = 236px */

.card.border-box {
  box-sizing: border-box;
}
/* border-box: rendered width = 200px; the content shrinks to 164px */