Derive selected from data when it survives unmounts
Implementing a preset/profile picker UI where the active selection should persist across drawer close/reopen and reflect manual edits
For "which preset/profile is active" dropdowns, the instinct is const [selected, setSelected] = useState(null) + setSelected(name) on pick. This is wrong for any UI that can unmount and re-mount (settings drawers, modals, tabs) because the local state resets to null and the dropdown reverts to a placeholder even though the underlying preferences are still that preset. The fix is to NOT store "selected" as React state at all — derive it via useMemo by computing a deterministic signature (JSON.stringify of just the relevant keys, in a fixed key order) over each saved preset and over the currently-applied preferences, then matching. The signature must iterate a fixed PRESET_KEYS array (not Object.keys) because Object.keys order is not guaranteed and the signatures must compare byte-equal. Bonus UX benefit: when the user manually tweaks any covered field after picking a preset, the signature drift naturally surfaces — dropdown reverts to placeholder, which is a useful "your settings have diverged from the saved profile" signal you would otherwise need extra state to track. Same trick applies to color theme pickers, layout-preset dropdowns, and any "which configuration is active" UI built on top of a flat settings object.
Default to derived selection (signature compare) for any dropdown whose value is "which named bundle of settings matches what is applied right now." useState for the selection is a smell — it will desync from reality on unmount and will not detect drift after manual edits. Iterate keys in a fixed declared order; do not rely on Object.keys for the signature.