Concurrent Store

Updating data while it refetches

You will learn

What useDeferredValue does for a refetch, and does well
Where a single deferred value runs out
Why a store can show the old list with your edit applied

useDeferredValue keeps the previous value on screen while a new one loads, so a refetch does not drop to a fallback. fate’s read Hook ends in use(useDeferredValue(promise)) for exactly that.

Try it

Click Open archive. The fetch is held open.
Click Mark all read while you wait, then Archive data arrives.

Both columns keep the inbox on screen, which is the part useDeferredValue gets right. Notice what happens on the second click: the left column still shows two unread. Its edit was applied to the fetch that has not returned, and the deferred value is still the untouched old list.

A deferred value can hold the value that was there before. It cannot hold that value with your change applied, because it is one value. Keeping two — what is on screen, and everything in order — can.

use(useDeferredValue(promise))deferred

mail/2 unread

AAdaEngine notes, part fournew

GGraceRe: the mothnew

AAlanDoes this terminate?read

Holds the previous promise while the next one loads.

use(useStore(store))store

mail/2 unread

AAdaEngine notes, part fournew

GGraceRe: the mothnew

AAlanDoes this terminate?read

Holds the previous value because the caller said it could wait.