function App() { const [buttonClick, setButtonClick] = useState('No') async function handleClick(){ setButtonClick('Yes') const sleep = (ms) ={return new Promise(resolve => setTimeout(resolve, ms))} await sleep(2000) console.log('this ran after state was changed') } return( <> <button onclick={handleClick}>Click me</> {buttonClick} </> ) }¿Cómo es que si hago clic en el botón, que establece el estado de buttonClick, no sale de la función? Todavía duerme durante 2 segundos y luego registra mi mensaje en la consola.
Mi opinión es que, dado que hace que un componente se vuelva a renderizar, me llevaría a creer que la aplicación de función está regresando y se rompería con la función handleClick.
Mis pensamientos sobre por qué esto podría ser es que podría ser cuando se compila React, solo está almacenando el valor de la devolución en otro lugar, y en realidad no devuelve la función más amplia App ().
Esto tiene más que ver con cómo funciona Javascript en lugar de React, haré todo lo posible para explicar:
handleClick .handleClick ahora está en la pila de llamadas y no terminará hasta que se devuelva un valor o se produzca un error.handleClick es actualizar el estado; sin embargo, actualizar el estado no terminará la invocación de handleClick e incluso si el componente se desmontara antes de que tuviera la oportunidad de finalizar, cualquier llamada a setButtonClick en un componente desmontado daría como resultado lo que se conoce como pérdida de memoria .setTimeout y async de esta función terminará en varias partes del bucle de eventos , pero eso tiene poco que ver con la pregunta original.Puede obtener más información sobre la naturaleza de las funciones de Javascript aquí .