1. 10
    Bypass Receded Views with React useTransition's timeoutMs Option
    2m 44s

Bypass Receded Views with React useTransition's timeoutMs Option

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Suspense components know one thing — how to show a fallback when promises are pending.

But that means, as we request new data is requested in those Suspense boundaries, the previous data will be replaced with the fallback.

This is known as the "receded state".

We can configure useTransition to present the the previous rendering of the component for a specified duration with the `timeoutMs' option.

Instructor: [00:00] We have this component, and it's using useTransition to deprioritize this setState update in a way that keeps our UI responsive to user interaction, but we have a problem. You might not be able to see it right now, but let's slow things down a little bit.

[00:19] When we click the Next button, our entire component goes back to the loading state. Click Next, loading. Next, loading.

[00:30] That's because as we set our Pokemon, our Suspensified fetch request is saying that this component is loading again. Even though we have a Pokemon and a button from the previous rendering, this entire component's state is pending. At the application level, where we have a Suspense boundary, the fallback is being enacted, and we're showing "Loading Pokemon."

[01:00] Seeing the loading state again when we have had a previous state is what's known as the receded state. You can read more about it on the React docs.

[01:10] What's important to know is that this is React's default state. Fortunately, useTransition has given us a way to configure how long we're willing to wait on the previous rendering before switching to this receded state. We control that with timeoutMS option.

[01:30] To get that going, we pass in an object to our useTransition hook. The key we'll use is timeoutMS. The value is how long we're willing to wait on the previous rendering. I'll use 1,000 milliseconds. Let's go back to our app and see what happened.

[01:49] Now when I click Next, React holds on to the previous rendering of this component for 1,000 milliseconds. If we slow things down even further and this transition takes longer than 1,000 milliseconds, React will switch to the receded state after that 1,000-millisecond timeout.

[02:15] We click, wait a second, see the loading state, new state. Click, wait a second, see the loading state, new state.

[02:23] In Ideal conditions, we would see no transition at all. Next, next, next. That is the timeoutMS option for useTransition, giving you fine grain control over how long you're willing to wait on the view that you have now before transitioning to the next view.

egghead
egghead
~ 24 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today