How does React decide whether to preserve or reset component state?

Direct answer

React associates state with a component's position and identity in the render tree; changing the component type or its key can make React treat it as a different component and reset that state.

Messenger.jsx

function Messenger({ contact }) {
  return (
    <Chat
      key={contact.id}
      contact={contact}
    />
  );
}

Using key outside lists is sometimes useful when changing business identity should deliberately create a fresh component instance—for example, clearing a message draft when switching recipients.