Reference useTransition

  • Used to for slow apps, but use sparingly
  • Used to prioritise when state changes
  • useTransition destructure 'isPending' and 'startTransition'
WDS Video on this Hook
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> ) }