useTransition - Web Dev Simplified

import { useState, useTransition } from 'react' export default function App() { const [isPending, startTransaction] = useTransition(); const [input, setInput] = useState(""); const [list, setList] = useState([]); const LIST_SIZE = 20000; function handleChange(e) { setInput(e.target.value); startTransaction(() => { const l = []; for (let i = 0; i < LIST_SIZE; i++) { l.push(e.target.value); }; setList(l); }) } return ( <> <input type="text" value={input} onChange={handleChange} /> {isPending ? 'LOADING...' : list.map((item, index) => { return <span key={index}> {item} </span> })} </> ) }