Can somebody help me figure out what is going on here and why? I've tried googling, but people focus on one way being faster vs other, one being more correct, etc... I didn't find resource which explains what is going on under the hood, what is the actual implementation difference and why do they behave differently.

I am interested in why it behaves like it does and what triggers that behavior.

Let's look at this code

const SomeComponent = (arg) => {
  const [typedAnswer, setTypedAnswer] = useState();
  const shouldAskForUserInput= arg === 1; // assume true
  const handleInputChange = (e) => setTypedAnswer(e.target.value);

  const ShortAnswer = () => (
    <Input type="text"
           name="answer"
           value={typedAnswer}
           autofocus
           handleInputChange={handleInputChange} />
  );

  return (
    <div>
      <p>whatever</p>
      <p>something else</p>
      {shouldAskForUserInput && <ShortAnswer />}
    </div>
  )

In this example, it will render a div with 2 p and an input field. This input field, when typed into behaves like any normal controlled component, except it doesn't.

If you type test into this input field and then move your cursor in the middle and try typing numbers 12 you will end up with string te1st2. This is because after each keypress (onChange) it will render again the input field. If I remove autofocus from input, you can type only one character at the time.

If I change following so that it is function call instead

  return (
    <div>
      <p>whatever</p>
      <p>something else</p>
      {shouldAskForUserInput && ShortAnswer()}
    </div>
  )

It will start to behave as expected, I can type any number of characters inside the input, it doesn't rerender on change, etc. Same result if I remove the function all together and put the input code directly instead of function call.

Now, what is actually happening there and why?