Full Stack Development

useDeferredValue

by Tomas Trescak t.trescak@westernsydney.edu.au

useDeferredValue

Motivation

  • Problem Instant updates can make UIs feel slow when dealing with large datasets.
  • Solution : useDeferredValue delays updates, keeping the UI responsive.

useDeferredValue

Introduction

  • A React Hook that delays updating a value.
  • Allows the UI to remain smooth and responsive.
  • Useful for filtering large lists, running expensive calculations.

useDeferredValue

/

Example

      import React, { useState, useMemo, useDeferredValue, render } from "react";

const items = Array.from(
  { length: 5000000 }, (_, i) => `Item ${i + 1}`
);

function SearchComponent() {
  const [query, setQuery] = useState("");
  // Delay applying the filter
  const deferredQuery = useDeferredValue(query); 

  const filteredItems = useMemo(() => 
    items.filter((item) =>
      item.toLowerCase().includes(
        deferredQuery.toLowerCase()
      )
    ), 
    [deferredQuery]
  );

  console.log(deferredQuery)

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.slice(0, 20).map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
render(<SearchComponent />);

useDeferredValue

Usage

  • ✅ Use useDeferredValue when:
    • Filtering or searching large lists
    • Running expensive calculations based on state
    • Rendering complex UI elements that depend on changing values

  • 🚫 Avoid using useDeferredValue when:
    • The update must happen immediately (e.g., form validation, real-time input feedback)

Conslusion

useDeferredValue vs useTransition

  • ✅ When to Use useDeferredValue?
    • Use when you already have a state value but want to delay updates.
    • Best for passing a state value to child components to optimize rendering.
    • Example: Filtering large lists based on user input.

  • ✅ When to Use useTransition?
    • Use when updating a state value itself should be delayed.
    • Best for marking a state update as non-urgent to prevent UI blocking.
    • Example: Switching tabs in a UI with heavy rendering.