[Suggestion]: Section "Queueing a Series of State Updates": await in event handler cause immediate rerender
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
Summary
The documentation says here: "React waits until all code in the event handlers has run before processing your state updates"
This not the case when using await inside the handler!
Example
const [myNumber, setMyNumber] = useState(0);
async function handleClick(){
setMyNumber(i => i + 1);
await delay(100);
setMyNumber(i => i + 1);
}
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
This will rerender the component twice!
Page
https://react.dev/learn/queueing-a-series-of-state-updates
Details
I suggest it should be mentioned as caveat/pitfall that if you call await inside an event handler,
all changes made to states before that await will then be flushed and trigger a rerender immediately, not waiting
for the event handler to finish completely.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Leggi la pagina “Queueing a Series of State Updates” collegata nell’issue e riproduci l’esempio di event-handler asincrono fornito per confermare il comportamento. Aggiorna quella pagina con una nota che spieghi che gli aggiornamenti di stato precedenti a un await possono essere sottoposti a flush prima che l’handler termini; il lavoro è completato quando l’esempio e le indicazioni sul batching sono accurati e chiari.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 1/5
- Tempo stimato
- Meno di un'ora
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 55/100