I recently worked on a combo-box component that originally was set up to use the provided `selectedKey` prop value on first render, but then to manage the key internally using the `useState` hook.

Managing the state completely internally after first render worked fine when the prop value wasn’t expected to change after first render. For example, if a new page was completely loaded with a new prop, that was fine, but when the page content was changed due to a React Router navigation (which didn’t cause a complete rerender of all components like a vanilla browser refresh would) then problems set in.

Essentially, I had to set up the combo-box component so that the `selectedKey` would be managed *internally* unless the prop input for `selectedKey` changed, when it would then set its internal `selectedKey` value to the prop value.

At first I tried just `setSelectedKey` just in the raw body of the component, but that resulted in the value of the selected key being reset to the input prop even when the input hadn’t changed because components rerender when their parent rerenders (unless they’re memoized of course).

So I put the `setSelectedKey` in the component inside a `useEffect` that triggers when the input prop value changes, and voilà, problem solved!