Problem with recommending startTransition in design system event handlers?
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
we generally recommend to bake useTransition into the design system components of your app
https://reactjs.org/docs/concurrent-mode-patterns.html#baking-transitions-into-the-design-system
// Button component in design system event handler:
function handleClick() {
startTransition(() => {
onClick();
});
}
Couldn't this lead to the problem mentioned later?
Try typing into the input now. Something’s wrong! The input is updating very slowly
https://reactjs.org/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state
The answer to this problem is to split the state in two parts: a “high priority” part that updates immediately, and a “low priority” part that may wait for a transition.
Solution:
function handleChange(e) {
const value = e.target.value;
// Outside the transition (urgent)
setQuery(value);
startTransition(() => {
// Inside the transition (may be delayed)
setResource(fetchTranslation(value));
});
}
If your design system components wrap all their event handlers in startTransition then how would you make a setState call in your handler run outside of a transition?
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
Esamina le sezioni collegate di Concurrent Mode Patterns sull’integrazione delle transizioni nei componenti del design system e sulla separazione dello stato ad alta e bassa priorità. Usa come punto di partenza gli esempi di event handler dell’issue; il lavoro è completato quando la documentazione spiega chiaramente se gli handler del design system debbano racchiudere i callback in startTransition e come gli aggiornamenti urgenti possano rimanere al di fuori di una transizione.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 30/100