A settings panel lets users toggle between light and dark theme. Their preference should be applied and persist when they click the toggle. The theme is always shown as dark regardless of what the user selects.
The page loads showing "Theme: dark" even though the user's saved preference is light. Clicking Toggle has no visible effect - the theme always reads "dark"
Look at the line where active is computed.
Look at the line where active is computed.
Why this fixes it
In JavaScript's spread syntax, when two objects share a key the rightmost one wins - writing { ...userPrefs, ...DEFAULTS } meant DEFAULTS.theme always overwrote userPrefs.theme, making the user's preference invisible regardless of what state held. Flipping the order to { ...DEFAULTS, ...userPrefs } puts user preferences last, so they win every key conflict with the defaults. Because active is computed inline on every render, any subsequent setUserPrefs call immediately produces a correctly merged object with the user's choice taking precedence.