Slide 1
-----------
Part 1: Let's explore yet another hook that allows you to optimise application performance and user experience.
Slide 2
-----------
Part 1: Imagine typing in a search box with thousands of results. If every keystroke triggers an update, it can cause slowdowns.
Part 2: Similarly to useTransition, useDeferredValue helps by deferring updates until React has time to process them.
Slide 3
-----------
Part 1: useDeferredValue is like a "traffic manager" for state updates. It lets urgent updates happen first, and then applies the less critical ones when there’s time.
Slide 4
-----------
Part 1: Check out this example!
Part 2: First, we defer the value of the query to a new variable, deferredQuery.
Part 3: Then, when we filter the long list ...
Part 4: ... we use the deferred value and the original query value.
Part 5: Moreover, we memoise the filtered values in case the deferred value remains the same. This happens when the application is under strain and value changes when resources free up.
Part 6: Last, we preview the value of the deferred value.
Part 7: When we filter the values, we can see that the application runs smoothly. Also, observe that in the console the deferred value remains the same when the application is under performance strain. So, what's happening here? Without useDeferredValue, every keystroke immediately updates the query variable, filtering the list which can cause performance issues with large datasets.
With useDeferredValue, the deferredQuery value updates only when React has time, making typing feel smoother.
Slide 5
-----------
Part 1: Use the deferredValue hook when you want to optimise user input when dealing with expensive computations, such as when filtering large lists.
Part 2: Do not use deferredValues when your UI must update immediately upon user input
Slide 6
-----------
Part 1: Both useDeferredValue and useTransition have their particular use. The main differene is whether you already have a state value but you want to delay the update, or you want to delay state update in general. This concludes our tutorial on React. We hope you enjoyed it!
LECTURE: UNDERSTANDING <STRONG>USEDEFERREDVALUE</STRONG> IN REACT
--------------------------------------------------------------------------------
INTRODUCTION: WHY DO WE NEED <STRONG>USEDEFERREDVALUE</STRONG>?
Imagine you're building a search feature for a large e-commerce website. As the
user types in the search box, the app should update results in real time.
However, if each keystroke triggers an immediate update, it can slow down
performance, making the UI feel sluggish.
This is where React’s useDeferredValue comes in! It helps optimize performance
by deferring updates to non-urgent values. This means your UI remains responsive
while still updating efficiently.
--------------------------------------------------------------------------------
UNDERSTANDING <STRONG>USEDEFERREDVALUE</STRONG>
WHAT IS <STRONG>USEDEFERREDVALUE</STRONG>?
* useDeferredValue is a React Hook that allows you to delay updating a value
until the UI has finished rendering urgent updates.
* It’s useful when you want to keep the UI responsive while working with slow
calculations, large lists, or expensive computations.
HOW IT WORKS
1. You provide useDeferredValue with a value.
2. React updates that value only when there’s idle time.
3. Meanwhile, the UI remains responsive to urgent interactions.
--------------------------------------------------------------------------------
EXAMPLE: IMPLEMENTING <STRONG>USEDEFERREDVALUE</STRONG> IN A SEARCH FILTER
Let’s say we have a list of items, and we want to filter them based on user
input.
import React, { useState, useDeferredValue } from "react";
const items = Array.from({ length: 5000 }, (_, i) => `Item ${i + 1}`);
function SearchComponent() {
const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query); // Delay applying the filter
const filteredItems = items.filter((item) =>
item.toLowerCase().includes(deferredQuery.toLowerCase())
);
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<ul>
{filteredItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
export default SearchComponent;
WHAT’S HAPPENING HERE?
* Without <strong>useDeferredValue</strong>: Every keystroke immediately
updates the list, which can cause performance issues with large datasets.
* With <strong>useDeferredValue</strong>: The search term updates only when
React has time, making typing feel smoother.
--------------------------------------------------------------------------------
WHEN TO USE <STRONG>USEDEFERREDVALUE</STRONG>
✅ 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)
--------------------------------------------------------------------------------
CONCLUSION
* useDeferredValue is a performance optimization tool that improves UI
responsiveness.
* It’s best used for deferring non-urgent updates, such as filtering large
datasets.
* It works well alongside useTransition for an even smoother experience.
By using useDeferredValue, you ensure your app remains fast and responsive, even
when handling large amounts of data! 🚀
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies