#patterns

Your ledger says a payment succeeded. The provider's settlement report, days later, disagrees. Which one is right?

Save to the database, then publish an event: two lines, two systems, and nothing that makes them agree. What happens when the process dies in between, and why every obvious fix still leaves a gap.

A checkout handler that calls the ledger, the warehouse, the email service and analytics in a row is as slow as all of them added together and as fragile as all of them multiplied. And every team that cares about payments makes it a little worse.

Two requests read the same row, both do their maths, both write back. One of them silently disappears. How the system should resolve that isn't one answer: it depends on whether the write is a delta, a quick piece of logic, or a human edit made minutes after the read.

Give each tenant its own schema and you get real isolation. You also get two new problems: knowing where each tenant lives, and running one migration correctly five hundred times instead of once.

One app, many customers, one WHERE clause keeping them apart. Forget it once and nothing crashes: tenant A just sees tenant B's invoices. How to make isolation something the system enforces, not something engineers remember.

You tap your card, the machine freezes, you tap again. Were you charged twice? An HTTP payment endpoint faces the same question on every retry, and without an idempotency key it gets it wrong.

Every project grows a hand-rolled fetch wrapper: untyped, half-cached, retried by accident. Here's one built on purpose, with types inferred from an OpenAPI schema and every layer explained.

Checking every pair in an array costs n² comparisons. If the array is sorted, one comparison can rule out a whole row of pairs at once, and the nested loop collapses into a single pass.

All of the site's copy moves out of components into one central file, and components read it through `t('key')`. The keys are typed against that file, so they autocomplete, and a typo or a deleted line fails the type-check instead of shipping blank.

Click "Show all" on a collapsed block and the button unmounts, taking keyboard focus with it: the next Tab starts from the top of the page. `useCollapsible` moves focus to whatever replaced the button.

`line-clamp` cuts text off, but it can't tell your JavaScript whether it did, so every short description gets a pointless "Show more". `useOverflow` measures the element and answers that one question.

A "Copied" tick, a "Saved" badge, a shake on a wrong password: state that should be true for a moment and then go back on its own. `useMomentaryFlag` is that boolean, with the timer handled.

A generic `retry(task, options)` that re-runs a failing async task with exponential backoff and full jitter, an optional `shouldRetry` predicate, and a cap on any single delay.

A ~20-line pub/sub where the event names and each event's payload type come from one map, so `on` and `emit` are fully checked against it and `on` returns its own unsubscribe.

A one-line helper that makes a `switch` over a discriminated union a compile error the moment a case is added and left unhandled, with a runtime throw as the safety net for data that violated the types at the edges.

A `Result<T, E>` union plus `tryCatch` wrappers that turn a throwing call into a value the caller has to inspect: the failure path becomes part of the return type instead of an invisible jump.

A `localStorage`-backed `useState` built on `useSyncExternalStore`: no hydration mismatch under SSR, live updates when another tab writes, and live updates when another hook on the same page writes.

One hook that lets a component be driven from outside (`value` + `onChange`) or manage its own state (`defaultValue`), the same two-mode contract a native `<input>` has, while the component body only ever reads one value and calls one setter.

A boolean `useState` that hands back `on` / `off` / `toggle` instead of a raw setter, so call sites read as intent. Every function, and the controls object itself, stays referentially stable, safe to pass as props or list as effect dependencies without retriggering anything downstream.