Как React не даёт несрочному рендеру потеряться: startTransition, useDeferredValue и Suspense
The article explains how React prevents non-urgent renders from getting lost, covering startTransition, useDeferredValue, and Suspense. It uses a catalog search example: an input field above a list of thousands of products. Rebuilding the list on every keystroke would make the input lag, so the list update can be marked non-urgent; React then shows the typed character immediately and rebuilds the list later in chunks between key presses. The text ends by asking what happens if the user types without stopping.
Представьте поиск по каталогу: поле ввода, а под ним список из тысяч товаров. Перестраивать такой список долго, и если делать это на каждое нажатие, поле начнёт тормозить. Поэтому обновление списка можно пометить как несрочное: тогда React покажет символ в поле сразу, а список перестроит потом, урывками, в промежутках между нажатиями клавиш. Но что, если пользователь печатает без остановки: список не обновится никогда? И что видит пользователь, пока новый список считается или грузится с сервера, - старый список, пустой экран или спиннер? Читать далее