Async React時代の宣言的UI 2: トランジション対応のuseDebouncedフックを作る

CRANK

皆さんこんにちは。以下の記事では、Async React時代の宣言的UIとして、デバウンスをuseDeferredValueで代替する方法を示しました。 { Suspense, use, useState } from 'react'; import { memoizeOne } from './utils/memoizeOne'; import { api } from './api'; import { useDebouncedValue } from './useDebouncedValue'; // api: (searchText: string) => Promise<string[]> const cachedApi = memoizeOne(api); function App() { const [text, setText] = useState(''); const searchText = useDebouncedValue(text, { intervalMs: 500, }); const searchResult = cachedApi(searchText); return ( <section id="center"> <h1>useDebounced test</h1> <p> <input value={text} onChange={(event) => { setText(event.currentTarget.value); }} /> </p> <div className="result-area"> <Suspense fallback={<p>Loading...</p>}> <SearchResult searchResult={searchResult} /> </Suspense> </div> </section> ); } const Se…