Для чего нужен useDeferredValue в React, простым языком
HTML-код
- Опубликовано: 29 сен 2024
- Все хуки в React простым языком: • Хуки React
В данном видео я хочу рассказать о том, для чего нужен хук useDeferredValue простыми словами и показать на примере, как можно повысить производительность React приложения.
Вы можете поддержать мой канал:
www.donational...
donate.qiwi.co...
зачем useMemo? app ререндерится только по изменению name, изменение name влечет пересоздание list, т.к. name в зависимостях у useMemo, поэтому что с useMemo, что без useMemo, list пересоздается при каждом ререндере, и useMemo только занимает лишнюю память и ресурсы процессора. И вообще неудачная переделка видео с webdevsimplified, просто Kyle Cook понимает, что делает, поэтому у него сам список создается в useMemo с deferredValue в зависимостях, т.е. он создается отложенно а не при каждом ренденер, а у автора в deferredValue уже сформированный список. Что с того, что в рендере будет рендерится не текущий список, а его deferred версия? mapу все равно, оба списка одинаковы, ну выиграем чуть-чуть при реконсцилляции, да. Но основная идея - отложенное пересоздание списка - потеряна при пересказе, просто наверное потому, что автор не понимает что делает. И вообще документация реакт ясно намекает, что ложить в useDeferredValue создаваемые в рендер объекты - плохая идея. Автор не читал документации на хук?
Мне всегда было интересно, зачем растягивать в 10 минутное видео в 10 секундный посыл. Если показывать простым языком, то можно ведь, в начале ролика начать так: Смотрите есть такой вот хук и у него есть какой то принцип. Открыть после этого 2 вкладки какого либо online compiler где на одном уже будут эти 2 строки для примера с хуком и запустить. Вот зачем человеку знать что в каком то идентификаторе у нас 5к итераций, что есть какие то там li, key={e.id} и прочее. Показать с чем этот хук взаимодействует, и как это отражается на рендер и все, в конце можно сказать: Зайдите в доку, там есть ньюансы использования, если уже лень будет об этом говорить. Вот это будет смотреться лучше, за этим люди приходят, а твой контент будет смотреться куда интересней.
1:38 и 8:09 особо-то и не отличаются)))))))
но спасибо за наглядный пример)
Ну для такого списка надо virtual list использовать, или же дебаунс инпута
допустим, что мемоизация действительно нужна, тогда useMemo тут мало что полезного делает, потому что Items не обернут в memo и тот факт, что между рендерами в list будет лежать одна и та же ссылка - не предотвратит ререндер компонента items
Молодец! Поздравляю , у тебя уже более 2К подписчиков!🎂🎊🎊🎊💝
А какой смысл в использовании useMemo, обновление стейта ведь все равно будет пересоздавать list и с использованием useMemo и без использования
Это, скорее, просто пример.