HomeReact Hooks
React Custom Hooks
Array Methods
Reference useTransition
import React, { useState, useTransition } from "react";
function ExampleUseTransition() {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState("");
const [list, setList] = useState([]);
const LIST_SIZE = 20000;
function handleChange(e) {
setInput(e.target.value);
startTransition(() => {
const l = [];
for (let i = 0; i < LIST_SIZE; i++) {
l.push(e.target.value);
}
setList(l);
});
}
return (
<Stack alignItems={"center"} sx={{ width: "100%", maxWidth: "40dvw", margin: 2, backgroundColor: "lightblue", padding: 7, borderRadius: 15 }}>
<input type="text" value={input} onChange={handleChange} />
{isPending ? (
<Typography>Loading.....</Typography>
) : (
list.map((l, i) => {
return <Box key={i}>{l}</Box>;
})
)}
</Stack>
)
}