Новые хуки useTransition и useDeferredValue в React 18

Конкурентный режим в React 18 позволяет помечать некоторые обновления стейта как несрочные, за счет чего улучшается пользовательский опыт. Приложение становится более стабильным, т.е. не лагает с точки зрения интерфейса, а несрочные обновления становятся асинхронными. Для этих целей React предложил нам два новых хука useTransition и useDeferredValue.
Пример из видео: codesandbox.io/s/react-concur...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@dirty_arkady]

Канал определенно обделен просмотрами, очень хорошая подача материала!

[@user-fo8zl6iw9u]

На мой взгляд подача недостаточно хорошая. Даже в доке реакта намного понятнее и проще изложены концепты.

[@etatevosian]

Очень понравился канал. Очень мало в сети подобных доступных к понимаю материалов. Спасибо автору!

[@lightinthedark5708]

Михаил, ценю Вас и Ваш канал за доступное и понятное объяснение. Спасибо за видео.

[@AlexGabber]

Очень простое и наглядное объяснение. Спасибо большое!

[@SergAlexson]

Миша, спасибо за видео! Все подробно и доступно разжёвано)

[@atlantatesla9348]

Рада, что нашла это видео. Отличное и доступное объяснение! На русском языке не так много хороших видео о фичах 18 версии react'а. Успехов вам!

[@WinchesterD]

Спасибо за видео, готовлюсь к интервью по Реакту, будет что рассказать. :)

[@user-ik8rn3lp7u]

Михаил благодарю за чёткое доходчивое видео, я с лёгкостью усвоил данный материал! Было интересно и полезно! 🎉

[@koala2077]

Спасибо за ролик. Читал статьи насчет конкурентного режима но так и не понимал до конца что это такое. Ваше видео хорошо объясняет эту концепцию)

[@unknown.6914]

Спасибо, за полезный контент Михаил

[@user-zs7kr6yp2s]

лучшее объяснение конкуретного режима, спасибо за работу

[@ivanoliinyk8404]

Дуже дивно чому так мало переглядів та вподобайок, але не зупиняйся ми це виправимо)))

[@dr_morpho]

Супер! Спасибо вам🤝

[@fizzbuzz5807]

Большое спасибо! Вот вам комментарий, лайк и подписка!

[@user-kg6fz5tz2b]

Спасибо!

[@vladvoloshenko5701]

спасибо за контент, огонь!!

[@user-dy9zo3oq6k]

Познавательно, лайк)

[@krohinri]

Миша, спасибо! Давай еще!

[@WebEnv]

Оч доступно, спасибо!

[@user-qc2ft6pz7h]

Очень мало лайков))Подача отличная, приятно слушать вас)

[@daimon31999]

Мое уважение 🎩

[@vasyok92]

Спасибо)

[@onevermore]

спасибо!

[@user-qb7jg4hx5l]

Спасибо

[@AndrewFloatrx]

также рекомендую ознакомиться с такими паттернами как debounce & throttle ))) до выхода этих хуков юзали именно их...

[@The14Some1]

Мне кажется, и после выхода этих хуков продолжат. Тут это выглядит как не очень контроллируемая полумера. У автора по-прежнему тормозит ввод, тогда как при debounce/throttle можно добиться совершенно нормального поведения даже на очень тормозном компьютере.

[@NeoCoding]

тоже в копилку, грасиас

[@irinal7766]

Отличнейший канал!

[@Moishe_Rubinstein]

Привет из Харькова!

[@mishanep]

Привет из Малаги.

[@Ivanesenses]

Лайк неглядя!

[@agrbear]

Спасибо за видео, немного не по теме вопрос, вы делаете акцент на том что инпут не управляемый, а в чем отличие если бы он был управляемый ?🙏

[@mishanep]

Мы отдельно хранили его значение в стейте и спускали бы его на поле value для инпута. В принципе можно и с управляемым сделать, просто не понижать приоритет для стейта введенного значения.

[@user-ug7ur8xu1c]

Интересно как это будет работать когда у нас данные, которые мы получаем с AJAX запросов, будут лететь в redux стору. И соответственно перерендер компонента будет форсить useSelector, а не изменение стейда компонента. Как пример, такая же ситуация как на видео, но фильтрация у нас происходит на стороне бэка

[@AndrewFloatrx]

используйте debounce для оптимизации запросов...

[@LRXAORLOV]

А если бы мы положили search в useDeferredValue, и фильтровали по deferredSearch ?

[@suslikest3708]

лойс!

[@user-gi8pn8or7l]

Привет! корректно ли оборачивать, например, отправку на сервер данных через axios в startTransition: const onSubmit = (values: z.infer) => { startTransition(() => { login(values) }) }, и да, в данном случае я использую Nextjs, здесь "login" это сервер экшн. Но все равно интересно

[@deriirostyslav2335]

Михаил добрый день, ищу видео как взаимодействовать с несколькими страницами в приложении? и как масштабировать приложения. Допустим нажам на кнопку на первой странице, передать данные (избранной карточки на другую) и на оборот, и допустим ввести данные на второй странице и создать из них список на третьей, и это всё разные страницы. ничего не помогает, всё перепробывал. благодарю!

[@IanNerovny]

Все равно ведь дебаунс и тротлинг во всем выигрывает, как мне показалось. Есть ли тогда какой-то кейс, где все же может быть предпочительнее использовать useTransition? Мне кажется, что нет.. Очень жду дебаус и тротлинг хуки в Реакте из коробки)) Совсем не понимаю, почему до сих пор не решили это добавить

[@profesor08]

Штука однозначно полезная, но от проблемы не избавляет, а лишь приуменьшает ее, и на каком-то средненьком телефоне, будет проявляться довольно заметно. Чтоб полностью избавиться от блокировки инпута, надо несколько иначе формировать компоненты, чтоб список рендерился отдельно, инпут отдельно, и данные считались отдельно. А сам пользовательский ввод надо как-то тротлить, например с помощью функций из lodash. И вот тогда даже на средненьких телефонах все будет круто.

[@sharkman6434]

а в чём смысл и преимущество ренедерить отдельно список, инпут и счтёт данных подскажите пожалуйста )

[@vladislavkomkov5178]

Что за адовые надстройки на реакте? Не уж то в этом есть эта необходимость??

[@romandeveloper7720]

Таким образом, хуки помогают сделать мини-дебаунсинг, если так можно выразиться) Верно?

[@mishanep]

Что-то вроде него, да.

[@iGotton]

+

[@codokit]

Ещё вариант решения проблем с быстрым вводом - это тротлить пользовательский ввод.

[@CJIu3eHb]

Не тротлить, а дебонсить.

[@MIHANIZM56]

Тоже самое хотел предложить. Интересно имеет ли смысл связка дебаунса и стартТранзишн

[@user-888azim-97]

нужно было разделить на 2 видео ((((( просмотров бы больше было, и денег бы больше было, хотя конечно от рф теперь нет монетизации, но всё равно удобнее было бы.

[@mishanep]

У меня на канале никогда не было рекламы =) Ютуб конечно может и сам вставки делать, не спрашивая автора. Но монетизацию на данном канале я не включал.

[@sivkaburka1062]

Досмотрел до 11:20

[@orionpro79]

а дальше что? Инет вырубили?)

[@your_hero_n1]

некорректно подал информацию. Может за год что и изменилось, но в доке чётко сказано, что startTransition и его хук не предназначены для того, чтобы помечать, как переходы изменения в инпутах. Поэтому у автора и тормозил пользовательский ввод даже после применения новой функции.

[@user-lk4mb3nw3d]

Эм, ну поиск на клиенте это тоже не бест практис ) Ну и фильрацию по каждому клику делать тоже не очч, наверно сюда лучше подошел дебаунсе?

[@chintore]

useDeferredValue работает в связке с мемоизацией. При изменении в инпуте он выдает значение с прошлого успешного рендеринга (коммита) и запускает новый рендеринг с уже актуальным значением. Соответственно после изменения инпута происходит сразу рендеринг инпута и МЕМОИЗИРОВАННОГО результата для ресурсозатратной части. Сразу после этого реакт начинает еще один рендеринг, но теперь useDeferredValue возвращает актуальное значение. После готовности второго рендеринга актуальный результат отрисовывается. Без мемоизации useDeferredValue бесполезен, и даже вреден.

[@chintore]

Новые изменения инпута могут прервать прошлые незаконченные рендеринги и запустить новый процесс. Соответственно ресурсозатратные вычисления ПОЛНОСТЬЮ будут производиться не для каждого введенного символа, а только для последнего изменения. Это все хорошо показано на схеме в видео. Логика очень схожа с debouncing.