#17: Does in pend?, 2021
startTransition is a great first step for stabilizing UIs by showing a “stale” view while a next view resolves.
But stabilizing a view is just the first step. We should communicate somehow that the view is stale.
We can do that with useTransition.
useTransition is an ever-so-slightly more complex hook. Like useState, it returns a tuple with. The first argument is the pending state of the transition. The second is the same function as the startTransition hook.
It looks like this:
let [isPending, startTransition] = React.useTransition()That first element, that we named isPending, is a boolean that expresses if the transition is transitioning. And we can use it selectively to add styles or elements.
In this week’s StackBlitz demo, we’ve use isPending, and state-specific styles, to lower the opacity of the “stale” view.
<div style={{ opacity: isPending ? 0.5 : 1 }}>
The button stays interactable while the UI provides immediate feedback to the user that something is happening.
How would you take this further to provide an even better experience?