You can do this with text too (like in spreadsheets, code, etc) to find differences visually.
{name}{confirmation}{request}
is basically a hidden render loop. If you had something like const inputs = [name, confirmation, request]
and rendered that via inputs.map() (or just {inputs}), it would have complained about the missing key prop. React can't seem identify which state belongs to which item in the "iteration". {nameInput}
{isBob ? confirmationInput : null}
{requestInput}
seems to avoid the issue as well, without using a key prop. So yeah, beware of hidden loops. const inputs = isBob ? [name, confirmation, request] : [name, request]
then it complains that there's no key prop and the issue persists. This shows it's because of confused identity. In the example, it doesn't complain because it doesn't understand that {name}{confirmation}{request} is essentially an unrolled loop.