Новые хуки useTransition и useDeferredValue в React 18
ฝัง
- เผยแพร่เมื่อ 12 เม.ย. 2022
- Конкурентный режим в React 18 позволяет помечать некоторые обновления стейта как несрочные, за счет чего улучшается пользовательский опыт. Приложение становится более стабильным, т.е. не лагает с точки зрения интерфейса, а несрочные обновления становятся асинхронными. Для этих целей React предложил нам два новых хука useTransition и useDeferredValue.
Пример из видео: codesandbox.io/s/react-concur...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Канал определенно обделен просмотрами, очень хорошая подача материала!
На мой взгляд подача недостаточно хорошая. Даже в доке реакта намного понятнее и проще изложены концепты.
Очень простое и наглядное объяснение. Спасибо большое!
Очень понравился канал. Очень мало в сети подобных доступных к понимаю материалов. Спасибо автору!
Миша, спасибо за видео! Все подробно и доступно разжёвано)
Михаил, ценю Вас и Ваш канал за доступное и понятное объяснение. Спасибо за видео.
Спасибо за видео, готовлюсь к интервью по Реакту, будет что рассказать. :)
Спасибо за ролик. Читал статьи насчет конкурентного режима но так и не понимал до конца что это такое. Ваше видео хорошо объясняет эту концепцию)
Рада, что нашла это видео. Отличное и доступное объяснение! На русском языке не так много хороших видео о фичах 18 версии react'а. Успехов вам!
Михаил благодарю за чёткое доходчивое видео, я с лёгкостью усвоил данный материал! Было интересно и полезно! 🎉
Спасибо, за полезный контент Михаил
Супер! Спасибо вам🤝
лучшее объяснение конкуретного режима, спасибо за работу
Познавательно, лайк)
Миша, спасибо! Давай еще!
Большое спасибо! Вот вам комментарий, лайк и подписка!
Оч доступно, спасибо!
спасибо за контент, огонь!!
Спасибо!
Мое уважение 🎩
Спасибо)
Очень мало лайков))Подача отличная, приятно слушать вас)
Лайк неглядя!
Дуже дивно чому так мало переглядів та вподобайок, але не зупиняйся ми це виправимо)))
Отличнейший канал!
спасибо!
тоже в копилку, грасиас
лойс!
Спасибо
Привет из Харькова!
Привет из Малаги.
также рекомендую ознакомиться с такими паттернами как debounce & throttle ))) до выхода этих хуков юзали именно их...
Мне кажется, и после выхода этих хуков продолжат. Тут это выглядит как не очень контроллируемая полумера. У автора по-прежнему тормозит ввод, тогда как при debounce/throttle можно добиться совершенно нормального поведения даже на очень тормозном компьютере.
Спасибо за видео, немного не по теме вопрос, вы делаете акцент на том что инпут не управляемый, а в чем отличие если бы он был управляемый ?🙏
Мы отдельно хранили его значение в стейте и спускали бы его на поле value для инпута. В принципе можно и с управляемым сделать, просто не понижать приоритет для стейта введенного значения.
Интересно как это будет работать когда у нас данные, которые мы получаем с AJAX запросов, будут лететь в redux стору. И соответственно перерендер компонента будет форсить useSelector, а не изменение стейда компонента. Как пример, такая же ситуация как на видео, но фильтрация у нас происходит на стороне бэка
используйте debounce для оптимизации запросов...
А если бы мы положили search в useDeferredValue, и фильтровали по deferredSearch ?
Штука однозначно полезная, но от проблемы не избавляет, а лишь приуменьшает ее, и на каком-то средненьком телефоне, будет проявляться довольно заметно. Чтоб полностью избавиться от блокировки инпута, надо несколько иначе формировать компоненты, чтоб список рендерился отдельно, инпут отдельно, и данные считались отдельно. А сам пользовательский ввод надо как-то тротлить, например с помощью функций из lodash. И вот тогда даже на средненьких телефонах все будет круто.
а в чём смысл и преимущество ренедерить отдельно список, инпут и счтёт данных подскажите пожалуйста )
Привет! корректно ли оборачивать, например, отправку на сервер данных через axios в startTransition:
const onSubmit = (values: z.infer) => {
startTransition(() => {
login(values)
})
}, и да, в данном случае я использую Nextjs, здесь "login" это сервер экшн. Но все равно интересно
Михаил добрый день, ищу видео как взаимодействовать с несколькими страницами в приложении? и как масштабировать приложения. Допустим нажам на кнопку на первой странице, передать данные (избранной карточки на другую) и на оборот, и допустим ввести данные на второй странице и создать из них список на третьей,
и это всё разные страницы.
ничего не помогает, всё перепробывал.
благодарю!
Все равно ведь дебаунс и тротлинг во всем выигрывает, как мне показалось. Есть ли тогда какой-то кейс, где все же может быть предпочительнее использовать useTransition? Мне кажется, что нет..
Очень жду дебаус и тротлинг хуки в Реакте из коробки)) Совсем не понимаю, почему до сих пор не решили это добавить
+
Таким образом, хуки помогают сделать мини-дебаунсинг, если так можно выразиться) Верно?
Что-то вроде него, да.
Что за адовые надстройки на реакте? Не уж то в этом есть эта необходимость??
Ещё вариант решения проблем с быстрым вводом - это тротлить пользовательский ввод.
Не тротлить, а дебонсить.
Тоже самое хотел предложить. Интересно имеет ли смысл связка дебаунса и стартТранзишн
нужно было разделить на 2 видео ((((( просмотров бы больше было, и денег бы больше было, хотя конечно от рф теперь нет монетизации, но всё равно удобнее было бы.
У меня на канале никогда не было рекламы =) Ютуб конечно может и сам вставки делать, не спрашивая автора. Но монетизацию на данном канале я не включал.
Досмотрел до 11:20
а дальше что? Инет вырубили?)
некорректно подал информацию. Может за год что и изменилось, но в доке чётко сказано, что startTransition и его хук не предназначены для того, чтобы помечать, как переходы изменения в инпутах. Поэтому у автора и тормозил пользовательский ввод даже после применения новой функции.
Эм, ну поиск на клиенте это тоже не бест практис ) Ну и фильрацию по каждому клику делать тоже не очч, наверно сюда лучше подошел дебаунсе?
Видео может и неплохое, но без исходного кода не имеет никакого смысла. Дизлайк.
useDeferredValue работает в связке с мемоизацией. При изменении в инпуте он выдает значение с прошлого успешного рендеринга (коммита) и запускает новый рендеринг с уже актуальным значением. Соответственно после изменения инпута происходит сразу рендеринг инпута и МЕМОИЗИРОВАННОГО результата для ресурсозатратной части. Сразу после этого реакт начинает еще один рендеринг, но теперь useDeferredValue возвращает актуальное значение. После готовности второго рендеринга актуальный результат отрисовывается.
Без мемоизации useDeferredValue бесполезен, и даже вреден.
Новые изменения инпута могут прервать прошлые незаконченные рендеринги и запустить новый процесс. Соответственно ресурсозатратные вычисления ПОЛНОСТЬЮ будут производиться не для каждого введенного символа, а только для последнего изменения. Это все хорошо показано на схеме в видео. Логика очень схожа с debouncing.
Спасибо)