Concurrent Store

Mixing blocking and Transition updates

You will learn

A Redux-shaped app keeps everything in one store, and not every update to it is the same kind. Changing the period can render in the background, so it belongs in a Transition. A keystroke cannot — it has to appear as you type, which is an ordinary blocking update. All three columns below put the period change in a Transition; they differ in what they do with the keystroke.

Try it

  1. Click Switch to year. The query is held open, so it stays in flight.
  2. Type in the filter box while you wait, then click Year data arrives.

Notice that the first column loses the dashboard, the second keeps the dashboard but ignores your typing, and only the third does both.

useSyncExternalStoreblocking
revenue/week
orders this week1,284
filtertype above…

Reads the store the way useSelector reads one today.

useStoretransition
revenue/week
orders this week1,284
filtertype above…

Every dispatch is a Transition, so nothing can overtake.

useStoreboth
revenue/week
orders this week1,284
filtertype above…

The caller marks each dispatch, the way React marks any update.