Параллелизм в React. Новые хуки useTransition и useDeferredValue
Вставка
- Опубліковано 11 лип 2024
- Рассмотрим новый механизм Concurrency в React 18 и новые хуки, позволяющие с ним работать. Как всегда, разберем все на примерах.
Telegram - t.me/snr_fullstack
00:00 - Concurrent React
00:59 - хук useTransition
03:18 - startTransition
04:49 - isPending
05:29 - нюансы useTransition
06:38 - хук useDeferredValue
09:16 - Итоги
Талантливая подача материала. Минимум воды, только суть, максимально разжевано и понятно. Очень приятно! Спасибо!
Посмотрел все видео за 1 присед, всё супер интересно, подробно, понятно. Ты первый на кого я подписался, с такой маленькой аудиторией. Удачи, и жду новые видео!
Спасибо!
Спасибо, что разбираете advanced темы
Отличные примеры 👍🏻
Спасибо за годный контент
Качественный контент , лайк )
Четкий пример!
Супер объяснение, раньше это был темный лес для меня! ОГОНЬ))) Насколько я понимаю, для запросов к api и выводу инфу (например как элементами списка тут) - все еще актуальны подходы с throttle/debounce и транзишн и деферд по сути только для каких-либо синхронных изменений больше подходят?
Спасибо
useTransition useDeferredValue react 18 спасибо
Спасибо за видео!
Если useDeferredValue внутри компонента приносит такую пользу, возникает соблазн использовать его всегда, просто на всякий случай - ведь хуже не будет? А если так, почему этот механизм не встроен сразу внутрь рендеринга?
Привет. Понравилось видео.
Подскажи пожалуйста, почти на 90% видео об этом режиме говорят одно и то же. Мне нужно, чтобы ты подтвердил ПРАВИЛЬНО ли я понимаю что такое этот режим. Если углубиться в подробности, то происходит следующее:
Представим что формирование списка занимает 2 секунды.
Теперь, разделяем рендеры на рендер низкого приоритета и высшего. Высшего, - это сам инпут т.к. он отзывчивый для юзера, поэтому он важнее. Те рендеры, которые оборочивает в useTransition,- низкого приоритета.
Как это работает: (помним что условно рендер занимает 2 секунды).
Т.к. рендер сам по себе СИНХРОННЫЙ, значит его ничто не может оборвать, остановить и прочее.
То есть, если мы 5 раз быстро ввели значение в инпут, значит у нас в очередь попало 5 ререндеров и они должны обязательно выполниться друг за другом (под капотом). 5 рендеров = 10 секунд условно. И лишь после 5 рендеров (10 секунд), - инпут вновь станет отзывчивым. У нас проблема: медленный рендер блокирует быстрый рендер.
Чтобы этого избавиться, мы юзаем useTransition.
Как это работает:
Вводим быстро 5 раз значение в инпут.
1 буква = 1ый ререндер (2 секунды), чтобы обработать список.
Сразу же 2 буква = 2ой ререндер (то тут мы не дожидаемся чтобы закончился ПЕРВЫЙ, т.е. не ждем 2 секунды от предыдущего рендера, а ОБРЫВАЕМ его, тоесть вмешиваемся и начинаем с нуля). Поэтому последний рендер и занимает чуть больше 2ох секунд а не 10 т.к. все предыдущие рендеры были оборваны. В них вмешались.
Вот пример:
stackblitz.com/edit/react-gqqvon?file=src%2FApp.js
Ставим sleep на 2000 и проверяем мои слова.
А потом пробуем без useTransition и проверяем без concurrency.
Пожалуйста, прочитай это и подтверди ошибаюсь ли я. Для меня это ОЧЕНЬ важно. С меня лайк и подписка обязательно=)