Get Previous Resource Values with React’s useDeferredState Hook

InstructorMichael Chan

React^0.0.0-experimental-b53ea6ca0

Share this video with your friends

Send Tweet

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.

Darren Seet

~ 5 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 Chan(instructor)

~ 5 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

~ 5 years ago

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