useDeferredValue

UIの一部の更新を遅延させる

stateをwrapして使う

ただし、通常のdebounceは指定した秒数を基準にして更新頻度を制御のに対し、

更に異なる点として、

途中でrenderingを放棄できる

データが読み込まれるまでは、以前の値が表示され続ける

code:ts

function SearchPage() {

const deferredQuery = useDeferredValue(query);

// ...

}

初回render時は、引数と結果の値は一致する

引数の値の更新時は、

まず遅延値を更新せずに再renderingを行い、

その後、新たに受け取った値で再度renderingを行う