Problem with recommending startTransition in design system event handlers?
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
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?
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Prüfe die verlinkten Abschnitte zu Concurrent Mode Patterns über das Einbauen von Transitions in Design-System-Komponenten und das Aufteilen von Zuständen mit hoher und niedriger Priorität. Verwende die Event-Handler-Beispiele des Issues als Ausgangspunkt; abgeschlossen ist die Aufgabe, wenn die Dokumentation klar erklärt, ob Design-System-Handler Callbacks in startTransition einschließen sollten und wie dringende Updates außerhalb einer Transition verbleiben können.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 30/100