HomeReact Hooks
React Custom Hooks
Array Methods
Reference useDeferredValue
- Used to for slow apps, but use sparingly
- Waits for a pause on the input before updating the state
- useDeferredValue replaces a 'throttling' or 'debounce' implementation
WDS Video on this Hook
import React, { useDeferredValue, useMemo, useState } from "react";
function ExampleUseDeferredValue() {
const [input, setInput] = useState("");
function handleChange(e) {
setInput(e.target.value);
}
return (
<Stack alignItems={"center"} sx={{ width: "100%", maxWidth: "40dvw", margin: 2, backgroundColor: "lightblue", padding: 7, borderRadius: 15 }}>
<input type="text" value={input} onChange={handleChange} />
<ListExample input={input} />
</Stack>
)
}
function ListExample({ input }) {
const deferredInput = useDeferredValue(input);
const LIST_SIZE = 20000;
const list = useMemo(() => {
const l = [];
for (let i = 0; i < LIST_SIZE; i++) {
l.push(<Box key={i}>{deferredInput}</Box>);
}
return l;
}, [deferredInput]);
return list;
}