reactjs / reactjs/react.dev

[Suggestion]: Section "Queueing a Series of State Updates": await in event handler cause immediate rerender

Aperta
#6,931 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

type: documentation
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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.