The pattern is older than hooks but I still type it weekly. Compose with Object.assign({}, base, variant, state, override) rather than re-implementing CSS specificity by hand; the spread order is the cascade, and a per-call style always wins. The destructure-then-spread idiom is what makes the component a good citizen on the DOM: pulling out the props that belong to the component logic (variant, disabled, loadingState) and rest-spreading the rest preserves all the call-site aria-*, data-*, and event handlers without you maintaining an enumerated allowlist. The constructor pattern from the legacy snippet collection is the same idea in a class context, with this.props taking the place of the destructure.

If you have a handful of rows, the inline arrow is fine and the rebuild cost is invisible. The pattern that matters is the third one: a single delegated handler on the parent reads event.target.dataset.id, calls the real callback, and the per-row functions disappear from the render. I reach for it whenever a list grows past about 1000 rows or whenever I am chasing a memo that is not hitting because every row's onClick is fresh on every render. The HTML-vs-React quirks at the bottom are the ones I get asked about most often: returning false from a handler does not cancel the default like it does in inline HTML attributes, and onChange is keystroke-level in React even though the native event fires on blur.

The svgr-style import is genuinely the nicest developer experience in the React ecosystem because the .svg file remains the source of truth and the React component is generated. If you do not have it, the inline-SVG component is the right fallback: write the markup once, expose size and color as props, and forward everything else with rest-spread. The aria-hidden="true" default is the accessibility line I do not skip; almost every icon in a UI is decorative, and announcing every path to a screen reader is what makes SVG-heavy interfaces unusable for keyboard-and-screen-reader users. Use role="img" plus a <title> child only when the icon carries semantic meaning that nothing else expresses.

I have written this component three times, finally pasted it into my dotfiles, and stopped writing it. The shape is <DebugJSON value={state} label="cart" />, hidden behind a one-character toggle so it is unobtrusive when you forget to remove it. The safeReplacer is the bit that earned its keep: a raw JSON.stringify of any React state with handlers in it throws on circular references and prints {} for functions, both of which made the original version useless. The production-mode short-circuit is the pragmatic part: the component returns null when NODE_ENV === 'production', so a stray instance left in a PR does not actually ship visible to users. Three Saturdays is not an exaggeration; one debug helper saves the time of writing the equivalent ad-hoc console.log chains every time you debug a stateful component.