Get Previous Resource Values with React’s useDeferredState Hook

Share this video with your friends

Published 4 years ago

Updated 3 years ago

The useDeferredValue Hook gives us a way to hold onto a previous resource values while waiting for a new one.

This is a more hands-on alternative to the magic of useTransition.
With useTransition, React "keeps" the previous rendering and gives you a magical isPending boolean to conditionally show loading UI.

useDeferredValue puts you in the driver seat by giving you the actual value.
This value can be used to implement our own isPending.

View code on GitHub

Instructor: [00:00] When we use isPending from the useTransition hook, we depend on React a lot. We depend on it to hold on to the previous rendering as we click this Next button and then make that transition at the right time. We don't actually have access to both values. We only know the value after the transition is complete.

[00:21] Fortunately, React gives us the tools to implement our own isPending and hold on to access to the previous value and the current value. The hook that we use for that is useDeferredValue.

[00:37] The first argument is the value we're interested in holding on to, which is our resource here. It also takes an object of options, timeoutMS being one of them just like our useTransition hook.

[00:53] Let's jump back to the front here and assign that to deferredPokemon resource. Instead of reading from Pokemon resource, we'll read from deferredPokemon resource. Format, save, let's click through and see what changed. Changed to a slower speed.

[01:18] We notice that our spinner is gone, so let's remove isPending from our useTransition hook and with it, the timeoutMS option and implement our own isPending.

[01:32] Here we'll check to make sure that the deferredPokemon resource isn't the same as the Pokemon resource. Whereas, the Pokemon resource will be pending or the latest value, the deferredPokemon resource will be the previous value until the current value is result. We can implement isPending by checking to make sure that they're not the same.

[01:58] As long as they're not the same, we're in a pending state. Let's save and see what happens. Go back to a slower-ish connection and we get our little spinner back.

[02:15] You may be asking yourself, "Why go through all of this song and dance when I already had isPending from useTransition?" The answer is you don't have to. If ever you find yourself in a position where you need to know what both values are, that's where you'll use useDeferredValue.

Darren Seet

~ 4 years ago

The code in the 112 does not seem to be matching the videos. In the code base most of the code is found in app.js and pokemon-detail.js only contains the following

import React from "react";
export default function PokemonDetail({ resource }) {
  let pokemon = resource.read();

  return (
    <div>
      <div>{pokemon.name}</div>
    </div>
  );
}

Michael Chaninstructor

~ 4 years ago

@seetd, Thank you for the report. I'm very sorry that the repo was not in a reliable state for this lesson.

I have fixed the issue. If you pull the latest changes, you will see the lesson as it appears in the video. The problem is that I switched lesson 112 and 113 last minute.

Thank you for your patience and understanding.

The diff: https://github.com/chantastic/react-suspense-course/commit/41d88508e313b0d577d4663c01b7b4356f21d55f

Darren Seet

~ 4 years ago

Thanks for looking into this, I will try it again when I complete some other courses.

Markdown supported.

Become a member to join the discussionEnroll Today

Build an App with React Suspense

Get Previous Resource Values with React’s useDeferredState Hook

Social Share Links