That is a very nice post! So generally, what I do is rather than storing the selected friend, I store the selected friend ID, and then I do
selectedFriend = friends.find(f => f.id === selectedFriendId) if needed.
The benefits of this approach are:
- you can’t end up with a selected friend that is no longer on the list
- you always have the latest value of the selected friend. You could imagine that under the hood for a given ID, the selected friend object completely changes
- you have a less complex state: that’s just a string
- if you decide to have a component that renders a friend, it’s better to pass the ID vs the entire friend