How Does the useDeferredValue Hook Work in React?
React now has concurrency support with the release of version 18. There are numerous features now that help to make better use of system resources and boost app performance. One such feature is the useDefferedValue
hook, in this article we're going to learn about useDeferredValue
and understand the scenarios where we can use it.
Why do we need useDefferedValue
?
Before we can see this hook in action, we need to understand something about how React manages state and updates the DOM.
Let's say we have the following code:
App.js
export default function App() {
const [name, setName] = useState('');
const computedValue = useMemo(() => {
return getComputedValue(name);
}, [name]);
const handleChange = (event) => {
setName(event.target.value);
};
return (
<input
type="text"
placeholder="Username"
value={name}
onChange={handleChange}
/>
);
}
Here we create a state variable with the useState
hook, and a computed value (computedValue
) derived from the state. We use the useMemo
hook to recalculate the computed value only when the state changes.
So when the value of the input field changes, the name
state variable is updated and the computed value is recomputed before the DOM is updated.
This usually isn't an issue, but sometimes this recalculation process involves a large amount of computation and takes a long time to finish executing. This can reduce performance and degrade the user experience.
For example, we could be developing a feature that lets a user search for an item in a gigantic list:
App.js
function App() {
const [query, setQuery] = useState('');
const list = useMemo(() => {
// 👇 Filtering through large list impacts performance
return largeList.filter((item) => item.name.includes(query));
}, [query]);
const handleChange = (event) => {
setQuery(event.target.value);
};
return (
<>
<input type="text" value={query} onChange={handleChange} placeholder="Search"/>
{list.map((item) => (
<SearchResultItem key={item.id} item={item} />
))}
</>
);
}
In this example, we have a query state variable used to filter through a huge list of items. The longer the list, the more time it will take for the filtering to finish and the list
variable to be updated for the DOM update to complete.
So when the user types something in the input field, the filtering will cause a delay in the DOM update and it'll take time for the text in the input to reflect what the user typed immediately. This slow feedback will have a negative effect on how responsive your app feels to your users.
I simulated the slowness in the demo below so you can better understand this problem. There are only a few search results for you to properly visualize it, and they're each just the uppercase of whatever was typed into the input field.
In this demo, I am typing each character one after the other as quickly as I can, but because of the artificial slowness, it takes about a second for my keystroke to change the input text.
useDeferredValue
in action
This is a situation where the useDeferredValue
hook is handy. useDeferredValue()
accepts a state value as an argument and returns a copy of the value that will be deferred, i.e., when the state value is updated, the copy will not update accordingly until after the DOM has been updated to reflect the state change. This ensures that urgent updates happen and are not delayed by less critical, time-consuming ones.
function App() {
const [query, setQuery] = useState('');
// 👇 useDefferedValue
const deferredQuery = useDefferedValue(query);
const list = useMemo(() => {
return largeList.filter((item) => item.name.includes(query));
}, [deferredQuery]);
const handleChange = (event) => {
setQuery(event.target.value);
};
return (
<>
<input type="text" value={query} onChange={handleChange} placeholder="Search" />
{list.map((item) => (
<SearchResultItem key={item.id} item={item} />
))}
</>
);
}
In the example above, our previous code has been modified to use the useDeferredValue
hook. As before, the query
state variable will be updated when the user types, but this time, useMemo
won't be invoked right away to filter the large list, because now deferredQuery
is the dependency useMemo
is watching for changes, and useDeferredValue
ensures that deferredQuery
will not be updated until after query
has been updated and the component has been re-rendered.
Since useMemo
won't be called and hold up the DOM update from the change in the query
state, the UI will be updated without delay and the input text will change once the user types. This solves the responsiveness issue.
After the query
state is updated, then deferredQuery
will be updated, causing useMemo
to filter through the large list and recompute a value for the list
variable, updating the list of items shown below the input field.
As you can see in the demo, the text changes immediately as I type, but the list lags behind and updates sometime later.
If we keep changing the input field's text in a short period (e.g., by typing fast), the deferredQuery
state will remain unchanged and the list will not be updated. This is because the query
state will keep changing before useDeferredValue
can be updated, so useDeferredValue
will continue to delay the update until it has time to set deferredQuery
to the latest value of query
and update the list.
Here's what I mean:
This is quite similar to debouncing, as the list is not updated till a while after input has stopped.
Since the useDeferredValue
hook defers updates and causes additional re-render, it's important that you don't overuse it as this could actually cause the performance problems we're trying to avoid, as it forces React to do extra re-renders in your app. Use it only when you have critical updates that should happen as soon as possible without being slowed down by updates of lower priority.
Conclusion
The useDeferred
value accepts a state variable and returns a copy of it that will not be updated until the component has been re-rendered from an update of the original state. This improves the performance and responsiveness of the app, as time-consuming updates are put off to a later time to make way for the critical ones that should be shown in the DOM without delay for the user to see.
See also
- Why does [] == ![] return TRUE in JavaScript?
- Create React App alternative: 5 times leaner, 0 vulnerabilities
- When it doesn't work on your machine or your brain or anywhere...
- structuredClone(): The easiest way to deep copy objects in JavaScript
- Why parseInt(0.0000005) returns 5 in JavaScript
- New HTML <dialog> tag: An absolute game changer