¿Puede alguien ayudarme a averiguar qué está pasando aquí y por qué? Intenté buscar en Google, pero las personas se enfocan en que una forma es más rápida frente a otra, que una es más correcta, etc. se comportan diferente.

Estoy interesado en por qué se comporta como lo hace y qué desencadena ese comportamiento.

Veamos este código

 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> )

En este ejemplo, generará un div con 2 p y un campo de input . Este campo de entrada, cuando se ingresa, se comporta como cualquier componente controlado normal, excepto que no lo hace.

Si escribe test en este campo de entrada y luego mueve el cursor en el medio e intenta escribir los números 12 , terminará con la cadena te1st2 . Esto se debe a que después de cada pulsación de tecla ( onChange ) volverá a aparecer el campo de entrada. Si elimino el autofocus de la entrada, solo puede escribir un carácter a la vez.

Si cambio lo siguiente para que sea una llamada de función en su lugar

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

Comenzará a comportarse como se esperaba, puedo escribir cualquier cantidad de caracteres dentro de la entrada, no se vuelve a representar al cambiar, etc. El mismo resultado si elimino la función por completo y coloco el código de entrada directamente en lugar de llamar a la función.

Ahora, ¿qué está pasando realmente allí y por qué?