Problem with recommending startTransition in design system event handlers?
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
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?
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Examinez les sections liées de Concurrent Mode Patterns consacrées à l’intégration des transitions dans les composants de design system et à la séparation des états de haute et de basse priorité. Utilisez les exemples de gestionnaires d’événements de l’issue comme point de départ ; le travail est terminé lorsque la documentation explique clairement si les gestionnaires du design system doivent envelopper les callbacks dans startTransition et comment les mises à jour urgentes peuvent rester en dehors d’une transition.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- documentation
- Type d'issue
- Documentation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- À clarifier
- Accessibilité débutants
- 30/100