First Look at React useTransition Hook

Learn how to use the useTransition hook in React.

​
----
#benawad

[av]

Thank you, I've been looking on how to simulate a slow network

[matthewvaccaro]

Dang dude, you fly around so fast using your keyboard. That’s a tutorial I would love to see!!!

[peterwang]

SuspenseList is the answer to your question at the end

[magnusolafsson]

Nice video! Both the person and the num are derived from the same useState hook. Maybe you could have something like numResource and a personResource and onClick you would wrap them in two different transitions so the state update would have its own transition, instead of having a shared transition, if that makes any sense.

[joracardanovsky]

Hi Ben, could you make a separate video for custom hooks ? What kind of hooks can we make, what should be inside and so on. Would be great

[BradyBrown]

I think this feature is cool, I guess Im just struggling to find a use case for it in a real world scenario that would be more beneficial than just using a state hook. A state hook is way more clear on what it is actually doing, and younger devs would be able to jump in and know exactly what is going on. As opposed to this method that seems to have a little more magic under the hood that they would have to understand

[michaelbrauner]

Hey! Nice Vid! Can u tell me, what mechanical keyboard and what switches u are using? Thank u.

[elie]

I think i am missing something.. so Suspense has a fallback for a loading state (i.e what to show when it is loading), and also you have the isPending boolean from useTransition, isnt just one enough?

[okbrown]

Hhhmm, a bit more cleaner than how it was done back in the jQuery days. All you need to do now is out a spinning icon in the button and your set. Lol!

[javascriptworld]

can we achieve something similar with react router on page switch, like yt for example showing progress indicator ?

[avivshvitzky]

Can someone explain to me the deal of this? cause if the whole idea is not rendering something until you get a response from the api, why just not rendering that thing in the first place? why you need this new tech to prevent something you can just not do from the beggining?

[vibhormungee]

Hi Ben, Would you use useTransition in production app? How would you handle show/hide loaders when calling multiple APIs without useTransition?

[ivan_dramaliev]

Here's a small shortcut that may clean up your (this video's audience) code a bit: instead of writing "{condition ? component : null}" use "{condition && component}". In Ben's tutorial, that'd go where "{isPending ? <div>...</div> : null}" is used.

[jbbz]

I don't think attaching the transition to a triggering component is reusable. The point here is not to make the transition when somebody clicks the button but when data is being fetched. There could be more than one action that triggers the same data fetching and it should have the same transition. For better reusability, I would rather create a higher order hook, if that's possible.

[efreitorhabibulin]

not showing loading state is the worst user experience ever, have no clue if there was an error if it doesn't work or what to do...

[blacklotus]

can someone plz explain why there is another onClick() inside of the startTransition wrapper and what does it achieve. 6:16

[muhamadivan]

can we avoid memory leak with useTransation??

[nosknut]

This susøense thing sounds dumb
"Exception: The application worked as expected"
You can do exactly this by setState(null); fetch().then(setState)
No need for shady framework that throws exceptions that arent exceptions

[AttilaTheDev]

Feels bloated, cumbersome and bolted on. In Angular these things have been resolved far more elegantly.

[edgar]

passing anonymous function to props, that is really antipattern that should not appear in any tutorial...