Tengo una pregunta con respecto a los ganchos y el estado del conjunto. Tomemos un ejemplo muy básico. Supongamos que tengo un cuadro de entrada y un botón, que es un caso de uso muy común. Cada vez que escribo en el cuadro de entrada y hago clic en el botón, el controlador de clic del botón debe reflejar el estado más reciente. En stackoverflow, vi el siguiente código para realizar la actividad:
const input = props => { const [textInput, setTextInput] = React.useState(''); const handleClick = () => { console.log(textInput); props.send(textInput); } const handleChange = (event) => { setTextInput(event.target.value); } return ( <div> <input onChange={handleChange} placeholder="Type a message..." /> <div onClick={handleClick} className="icon"> <i className="fa fa-play" /> </div> </div> ) }No está por encima de setTextInput(event.target.value); entrada asíncrona como reaccionar hace el procesamiento por lotes? Entonces, cuando el usuario hace clic en enviar, ¿cómo sé que el estado está realmente actualizado? . Este es un caso de uso muy básico y no quiero usar useRef ya que debe ser un problema común o me estoy perdiendo algo.
Nota: En la solución anterior, queremos leer el estado solo después de que se cumplan ambas condiciones:
En mi conocimiento limitado, setState es de hecho asíncrono. No interrumpe otros procesos para llevar a cabo la configuración del estado. Está en cola para ejecutarse en el siguiente lote.
La situación de la que está hablando aquí nunca tendrá la naturaleza asíncrona de setState que causará problemas. La acción del usuario al hacer clic siempre ocurrirá después de que se establezca el estado nuevo.