javascript / intermediate
Snippet
Improving UI Responsiveness with useDeferredValue
useDeferredValue allows you to defer updating a part of the UI until more urgent updates (like typing in an input) are handled, preventing UI jank during expensive renders.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { useState, useDeferredValue } from 'react';function SearchResults({ query }) {const deferredQuery = useDeferredValue(query);return (<div><p>Results for: {deferredQuery}</p>{/* Render complex list using deferredQuery */}</div>);}
react
Breakdown
1
const deferredQuery = useDeferredValue(query);
Tells React to keep the old value visible while the new one is being processed in the background.