React useDeferredValue Performance Hack

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

AUTOPLAY

Track Progress 👉🏻

Questions / Comments ==>

Professional React Lessons

2.Setup for React Development

3.Create a React Project

4.JSX Mental Model

5.ReactJS Prop Handling

6.JSX Fragments Simplified

7.Styling HTML in React

8.React State Management and useState

9.Conditional Rendering

10.Rendering in a Loop

11.Pure Components and React.memo

12.Using Index as Keys

13.React Event Handling

14.React DevTools Masterclass

15.Error Boundaries in React

16.React Rules of Hooks

17.React useEffect Simplified

18.React useRef Hook

19.React Batching Updates and flushSync

20.React useReducer Simplified

21.React Context API

22.Radio Buttons in React

23.React useId Simplified

24.React useMemo Demystified

25.Select Component in React

26.Creating Forms with React

27.Deploying your React App

28.React useDebugValue Secret Hook

29.React useCallback Performance Optimizer

30.React forwardRef Demystified

31.React useImperativeHandle Unleashed

32.React useDeferredValue Performance Hack

33.React useTransition - Fine Grained Control

34.Building a Complete Game

React useDeferredValue Performance Hack

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

Use case for React `useDeferredValue` hook

The useDeferredValue hook can be used to delay the updating of a value till react is less busy rendering the ui.

For example, every render of the following app is going to be slow because the Products component involves some heavy rendering. This means whenever the user interacts with the input the whole application slows down.

App.tsx

Products.tsx

import { useState } from "react";
import { Products } from "./Products";

export default function App() {
  const [value, setValue] = useState("");

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />

      <Products searchTerm={value} />
    </>
  );
}

Wouldn't it be great if we could defer the rendering of Products till react is less busy?

Improving perceived performance with `useDeferredValue`

We can derive a less busy version of any value by using the React built-in useDeferredValue hook.

As an example we wire the Products in the below example to useDeferredValue version of the input. This way, Products only need to re-render when user has calmed down (and not typing in the input anymore).

App.tsx

Products.tsx

import { useState } from "react";
import { Products } from "./Products";
import { useDeferredValue } from "react";

export default function App() {
  const [value, setValue] = useState("");

  const deferredValue = useDeferredValue(value);

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />

      <Products searchTerm={deferredValue} />
    </>
  );
}

This application (with useDeferredValue) definitely has a better perceived performance compared to the previous version (without useDeferredValue).

Notifying Value Staleness

You can easily check if a value has been deferred (is stale), by comparing the original value with the result of useDeferredValue. Put simply in code:

useDeferredValue Staleness Check

const deferredValue = useDeferredValue(value);
const isStale = deferredValue !== value;

You can use this boolean to provide some indication to the user that some information displayed might be stale.

As an example we can use it to change some styles as shown in the code below.

App.tsx

Products.tsx

import { useDeferredValue, useState } from 'react';
import { Products } from './Products';

export default function App() {
  const [value, setValue] = useState('');

  const deferredValue = useDeferredValue(value);
  const isStale = deferredValue !== value;

  return (
    <>
      <input
        style={isStale ? { color: 'dimgray', backgroundColor: '#eee' } : undefined}
        value={value}
        onChange={e => setValue(e.target.value)} />
      
      <Products searchTerm={deferredValue} />
    </>
  );
}

Enjoy free content straight from your inbox 💌

Transcript

00:00

React comes with a number of performance features that we can use to optimize the user experience. One easy hack is the built-in use deferred value hook, which smartly defers updating values to keep the UR responsive. So let's take a look. This hook really comes in handy when you have a component that does a lot of rendering, and for that purpose we specify this count of 10,000 items, and for each item we will have some basic CSS styles. These items belong in a products component and this component takes a search term to render a list of items that match that search.

00:34

Now we don't have a real backend over here, so we are just going to mock generate account number of items and each item will contain the search term as its prefix followed by a randomly generated number. We are using the use memo hook to make sure that we don't do this calculation again, unless the search term changes within the UI of the products component. We simply render out a bunch of divs where each div represents an individual product. Now that we have this component, which can be potentially quite heavy to render, let's try to use it within our application.

01:06

We bring in the products component from the products module, and then we have a simple value to manage the search term that we intend to pass to the products component. We provide the user with a simple input that is wide to value and set value, and then we render the products component with the search term pointing to the value that the user provides. We can see this UI in action with our input component followed by the products component, which will generate values based on the input. Now, because the products is a massive list, there's going to be a noticeable lag as we enter values in the input

01:39

til React eventually gets to re-render it. Again, an ideal situation over here would be that as the user enters characters into the input, the input should immediately reflect the fact that those characters have been accepted, but the list of products that are being rendered by the products component can be deferred till the user is no longer providing additional input. A clever solution to this problem is offered by the built-in React used deferred value hook, which only updates a value if React isn't already doing some heavy lifting. The used deferred value hook is a part of the main react module,

02:11

and we can bring it in just like we bring in the other hooks. Like you state this hook takes an input value and then returns a possibly delayed version of that same value. If React is doing a lot of work right now, then it'll return the previous value, otherwise it'll provide the most UpToDate value. So now we still have the input wired to value, so the user gets immediate feedback that the value has been accepted. But in terms of the products component, we use the deferred value because we don't want that component to be stuck in a loop constantly doing newer and newer searches, which might need to be discarded anyways

02:45

because React would know that there are newer values that have been provided. And with this simple change in place, our application instantly performs much better. We type a keystroke, we see that immediately within the input and the list Updates as needed. Because we are using a deferred value, the user might be dealing with delayed results. A nice thing that we can do is provide some visual indicator for the user that they are looking at some stale information, and for that we need to determine when a value is being deferred. So we are in the process of typing some characters into the

03:18

input, and of course, they haven't been picked up by the product list yet. The product list does eventually catch up, but if you make further modifications to the input, it doesn't render again and again till we stop typing and then it eventually does catch up. Now, determining when a value is being deferred is actually quite easy. We simply need to compare the current value to the deferred value, and if they are not equal, this means that we are dealing with stale information. We can use this to render any form of indication that we want. For example, we can turn the input into a slight gray to note the fact that right now this information has been

03:53

accepted, but it hasn't made its way all the way through the application. Yet the text is gray when we are smashing at the keys, and at any point when we stop typing, it turns black to indicate that it's fully rendered. One more thing that I want to mention is that you might be used to providing an explicit duration when working with Js Reputability functions for debouncing and throttling, but you don't need to do that with reacts. Use deferred value. This is because react will automatically render a deferred value when there is some rendering happening, so you don't need to provide some arbitrary duration

04:26

for when you want to throttle a value. As always, thank you for joining me and I will see you in the next one.

Professional React

Professional React

2.Setup for React Development

3.Create a React Project

4.JSX Mental Model

5.ReactJS Prop Handling

6.JSX Fragments Simplified

7.Styling HTML in React

8.React State Management and useState

9.Conditional Rendering

10.Rendering in a Loop

11.Pure Components and React.memo

12.Using Index as Keys

13.React Event Handling

14.React DevTools Masterclass

15.Error Boundaries in React

16.React Rules of Hooks

17.React useEffect Simplified

18.React useRef Hook

19.React Batching Updates and flushSync

20.React useReducer Simplified

21.React Context API

22.Radio Buttons in React

23.React useId Simplified

24.React useMemo Demystified

25.Select Component in React

26.Creating Forms with React

27.Deploying your React App

28.React useDebugValue Secret Hook

29.React useCallback Performance Optimizer

30.React forwardRef Demystified

31.React useImperativeHandle Unleashed

32.React useDeferredValue Performance Hack

33.React useTransition - Fine Grained Control

34.Building a Complete Game