#4: React Hooks - useMemo + React.memo

  Рет қаралды 73,170

Archakov Blog

Archakov Blog

Күн бұрын

Пікірлер: 176
@Alequez97
@Alequez97 Жыл бұрын
Изначально поставленная проблема в первом примере - счётчик 1 работает медленно из-за сложных вычеслений счётчика 2. Сразу возникает вопрос а почему вообще рендеры счётчика 1 зависят от счётчика 2. И ответ находится в компоненте App, который почему-то отвечает за то, чтобы хранить состояние счётчиков. А если счётчиков будет 10? Тут сразу должно бросаться в глаза дублирование кода. Чтобы добавить новый счётчик нам надо написать новый вызов useState и скопировать разметку. Здесь это сделано 2 раза, а если счетчиков будет 10, то сделать это надо будет 10 раз. Соответсвенно и проблема здесь не в том, что не используется мемоизация, а в том, что App занимается тем, что он не должен делать. Каждое изменение будет перерендеривать все счетчики, даже когда изменился только один. Если вынести useState и разметку в отдельный компонент скажем CountContainer, который сам будет хранить состояние своего счётчика и передать через пропсы id и isFiveCheckRequired, то проблема медленного счётчика 1 уходит и без мемоизации. Проблема счётчика 2 с медленным вычеслением остаётся, такое решение пока что еще не закроет это. Но здесь у меня уже вопрос по тому, как разделена логика. Я не знаю как вы, но я обычно разделяю компоненты на те, кто отвечает за представление, логику и загрузку данных или любые другие побочные эффекты. Здесь, в компонент, который отвечает за то, чтобы отобразить разметку, почему-то попала какая-то логика. Если еще раз взглянуть, то этот компонент получает пропс, проверяет 5 ли это и отображает разметку в зависимости от условия. Но это уже детали, допустим вместо while здесь какая-то полезная логика, допустим сетевой запрос. Как мемоизция оптимизирует компонент без стейта и с одним пропсом? Если нам нужна мемоизация для того, чтобы оптимизировать другой компонент, который не является самим компонентом или дочерним компонентом, то проблема не в отсуствии мемоизации, а в неправильном разделении логики. Если представить, что вместо while выполняется какая-то логика и она действительно занимает скажем секунду, то в таком случае мы можем только показать красивый лоудер, что происходит вычисление или ожидается ответ сервера. И если это логика зависит от value, то это будет useEffect с зависимостью value, а не useMemo. useMemo в этом примере вообще бесполезен. Он нужен только тогда, если вам нужно оптимизировать рендеры дочерних компонентов, при передачи результатов через пропсы, либо оптимизировать вычисления самого компонента в случае, если он имеет несколько причин, по которым может быть рендер. Пример из реакт документации - у нас есть три пропса, один из них задаёт тему компонента, два других учавствую в каком-то вычислении. В таком случае мы можем обернуть в useMemo эту функцию вычеслений с зависимостью этих двух пропсов и в таком случае, если мы снаружи поменяем тему, то вычесление не будет произведено, а мы просто отобразим значение из кеша с новой темой. В общем и целом вы показали как работает мемоизация в реакте, но не когда её применять, как и зачем. Изначальный код был хорошим для того, чтобы показать как делать рефакторинг, разделять логику на компоненты и объяснить почему если компонент может хранить свой стейт, то следует его поместить именно в компонент. В итоге вместо этого плохой код стал еще хуже, потому что при рефакторинге придется убирать мемоизацию и начинать с нормального разделения на компоненты. Вторую часть не буду расписывать, потому что все проблемы оттуда же, что я уже написал и они бы тоже были решены нормальным разделением на компоненты. Если бы мемоизация была бесплатной, то можно было бы хоть везде и всё мемоизировать, но это не так и нужно понимать когда это даст оптимизацию, а когда может наоборот ухудшить производидельность. Не только количество рендеров влияет на производительность
@MessiLeonelle
@MessiLeonelle 3 ай бұрын
бро, это гаддемн какой-то
@bur5153
@bur5153 4 жыл бұрын
Что мы можем сказать исходя из этого видео? То, что Archakov красавчик.
@БогданНасиковский
@БогданНасиковский 2 жыл бұрын
В точности так!
@kerimkerimli5490
@kerimkerimli5490 3 жыл бұрын
Чисто человеческое Спасибо тебе, настолько прекрасно объяснил всё прям по полочкам разложил, по сути все делают такие видео, но настолько глубоко и в чистом виде не делает ни кто, так что Удачи тебе и Рад всем твоим новым подачам Инфы)))))
@lalathealter6513
@lalathealter6513 2 жыл бұрын
Шикарное объяснение, большое вам спасибо
@elzaizrivii6486
@elzaizrivii6486 4 жыл бұрын
Я ждал продолжение реакт хуков уже 10000 лет!
@DzhavidR
@DzhavidR 4 жыл бұрын
я то же самое. и жду юзРедюсер
@Max-kr4ie
@Max-kr4ie 3 жыл бұрын
Просто "Вы не готовы!" были.
@АлМ-ы8ъ
@АлМ-ы8ъ 3 жыл бұрын
За 10 000 лет можно и документацию на английском языке освоить )))
@Котвсапогах-с4д
@Котвсапогах-с4д 2 жыл бұрын
В АЗКАБАНЕ!!!
@FilmsMediaTV
@FilmsMediaTV 2 жыл бұрын
@@Котвсапогах-с4д 🤣🤣
@АнтонНаливайко-г2ю
@АнтонНаливайко-г2ю 2 жыл бұрын
Настолько понятно объяснить нужно иметь талант. Спасибо!!
@botino-k
@botino-k Жыл бұрын
Этот канал- находка для меня! Спасибо за труды🤗
@dmitrykarpovich186
@dmitrykarpovich186 9 ай бұрын
Отличное пояснение, спасибо огромное за труд. Желаю что бы старания автора окупились во много раз)
@bugaga8144
@bugaga8144 2 жыл бұрын
Очень понятно и доступно объяснили! Перешел на выше видео,так как у другого блогера вообще не понял что к чему и куда, с вашей помощью все встало на полочки
@vseslavr
@vseslavr 4 жыл бұрын
Лайк не глядя
@СергейПетров-б4щ4ч
@СергейПетров-б4щ4ч 2 жыл бұрын
Самое лучшее объяснение useMemo 🔥
@FF-gq3hm
@FF-gq3hm Жыл бұрын
Спасо за видео🍕🍕👨‍💻👨‍💻
@vitaliyyasinskiy3689
@vitaliyyasinskiy3689 2 жыл бұрын
Еще один божественный лайк божественному видео
@devorer77
@devorer77 4 жыл бұрын
спасибо! писал в телеге и пповтрю тут - по части хуков у тебя самые толковые видео в русском тытубе
@astkh4381
@astkh4381 Жыл бұрын
Спасибо,Разобрался.Лайк
@gritsienkooleg3447
@gritsienkooleg3447 2 жыл бұрын
Блин, как же понятно, Антон, спасибо тебе огромнейшееееее!!!
@duce201
@duce201 4 жыл бұрын
спасибо большое за материал!!! все доходчиво и наглядно объяснил.
@KuBa-tkm
@KuBa-tkm 4 жыл бұрын
Чувак СПАСИБО!!!! Я ЖДАЛ! ААААААААААААА
@MarinYehor
@MarinYehor 4 жыл бұрын
@Archakov Blog, всплывающие названия материала в иконке посередине на милисекенду замечательны! Усваивается лучше материал от того, что мозг удивлен подачей мощнейшей (React.memo, React.useMemo)
@iliyabrook2933
@iliyabrook2933 2 жыл бұрын
Оромное спасибо!, подача информации настолько понятная и прозрачна, с актуальными и граматными примерами!, Респект!
@mesho4ekGovna
@mesho4ekGovna 4 жыл бұрын
Просто лайк авансом ставлю!
@АлександрОкатьев-р4с
@АлександрОкатьев-р4с 3 жыл бұрын
есть ошибка, 6 !== 5 хотя isFive будет говорить обратное после написания "shoulComponentUpdate" надо вот так =) (prev, next) => !(prev === 5 || next === 5)
@АлександрОкатьев-р4с
@АлександрОкатьев-р4с 3 жыл бұрын
ну а так все объяснил отлично! like
@nodirayakubova6395
@nodirayakubova6395 4 жыл бұрын
Классная инфа,спасибо Archakov)
@alexey9404
@alexey9404 3 жыл бұрын
Обнови железо! Ничего зависать не будет. Шучу хороший видосик, спасибо!
@omarkertis5294
@omarkertis5294 4 жыл бұрын
Спасибо. Положу себе под ёлку.
@whiteguards43
@whiteguards43 2 жыл бұрын
8:55 возвращает результат выполнения функции, которую указали в пером фекаргументе, А юзЭффект так не делает?
@andrTaylor
@andrTaylor 4 жыл бұрын
Я дождался! Спасибо! Жду про юз колбэк)
@turalinov
@turalinov Жыл бұрын
Спасибо за наглядные примеры!
@Г.Ка
@Г.Ка 3 жыл бұрын
Шикарно объяснил! Кратко, наглядно. Лайк
@bukanaka
@bukanaka 3 жыл бұрын
Блин, так доходчиво объясняешь! Даешь гайды на все хуки!
@NoName-hs4qp
@NoName-hs4qp 3 жыл бұрын
Царек. Уважаю!
@ivanegorov9749
@ivanegorov9749 3 жыл бұрын
Лайки не забываем ставить, отличные видео! все четко и понятно.
@EvgenyT2011
@EvgenyT2011 3 жыл бұрын
Спасибо, это было реально очень полезно.
@olehy5000
@olehy5000 3 жыл бұрын
Спасибо тебе добрый человек! Теперь стало понятно)😀
@mykhailonikolaiev6512
@mykhailonikolaiev6512 Жыл бұрын
Хорошее объяснение, спасибо
@oleksiik4473
@oleksiik4473 4 жыл бұрын
О, огонь, лайк вперёд! З наступающим!
@ArchakovBlog
@ArchakovBlog 4 жыл бұрын
Спс) И тебя тож
@FilmsMediaTV
@FilmsMediaTV 2 жыл бұрын
Раскидал именно все по полочкам)
@maksrygaev657
@maksrygaev657 2 жыл бұрын
спасибо лучшее обьяснение
@lollolich2399
@lollolich2399 2 жыл бұрын
очень мегахорош, лайк!
@МаксимМ-й7с
@МаксимМ-й7с 4 жыл бұрын
Годно!
@aquilon1790
@aquilon1790 3 жыл бұрын
Спасибо, очень доступно объяснил. Лайк поставил, коммент для продвижения написал, подписку оформил. Успехов!
@basmong
@basmong Жыл бұрын
Отличное видео. Хотел бы уточнить, получается что в компоненте isFive, после добавления React.memo мы можем избавиться от хука useMemo внутри компонента(который присваивали к getResult)?
@liadmarsh
@liadmarsh 4 жыл бұрын
Отличное видео, но есть такой резонный вопрос: почему тогда не стоит все подряд оборачивать в useMemo и Memo, и если в самом деле не стоит то почему?
@dzhabulya
@dzhabulya 4 жыл бұрын
Потому что мемоизация не бесплатная операция. Тот же Массив зависимостей который ты передаёшь, js тратит время на его создание. useMemo как и memo позволяет оптимизировать производительность, уменьшая количество ненужных перерасчётов и ререндеров. Но бывают такие ситуации когда ререндер стоит дешевле чем мемоизация. Ведь тот же memo будет каждый раз проходить по всем пропсам и смотреть изменились ли они преждем чем произвести ререндер. Поэтому оптимизация нужна только когда в ней есть необходимость.
@Mark1-f2n
@Mark1-f2n 4 жыл бұрын
@@dzhabulya как тогда понять когда использовать, а когда нет?)
@dzhabulya
@dzhabulya 4 жыл бұрын
@@Mark1-f2n замерять производительность ) Если ты видишь что твоё приложение тормозит, стоит проводить оптимизацию
@mayer9228
@mayer9228 4 жыл бұрын
Ответ на этот вопрос достаточно банален. Если даже не брать во внимание то, что хуки сказываются на производительности, то любая оптимизация приложения без видимых на то причин - трата времени. Время - деньги, и любые вопросы с производительностью нужно решать только по мере их возникновения.
@uzver3787
@uzver3787 3 жыл бұрын
хороший урок - спасибо! Предложил бы собрать в однойм видео какие-то хитрые моменты из всех хуков, которые могут сломать мозги, если не встречался с ними)
@ДениИмагожев11
@ДениИмагожев11 3 жыл бұрын
кайфффф!! очень подробное объяснение
@jobsearchfordancer4372
@jobsearchfordancer4372 3 жыл бұрын
Хорошее видео по useMemo и React.memo
@AmirKadenov
@AmirKadenov 2 жыл бұрын
Благодарю!
@АлександрСавостин-н4к
@АлександрСавостин-н4к Жыл бұрын
спасибо за труд!
@Алексей-о3т1щ
@Алексей-о3т1щ Жыл бұрын
отличное видео
@aiylchiievjs6207
@aiylchiievjs6207 3 жыл бұрын
спасибо больщое вам!
@AlexSizovRun
@AlexSizovRun 2 жыл бұрын
Супер видео, спасибо
@AKucenko
@AKucenko 3 жыл бұрын
Попробовал отследить ререндеры в проекте пицца. К примеру в компоненте ререндер происходит один раз при обновлении страницы и далее по два раза каждое нажатие на категорию, т.е был 1, стал 3, далее, 5 (при выборе категории)... Компонент рендерится аж 19 раз при обновлении страницы, но сам console.warn выскакивает 10 раз. Если же выбрать категорию, то будет 11 console.warn'ов и значение переменной renderCount будет равно 41. Возможно, я что-то не так делаю, но все по аналогии. Хотелось бы понять, почему так? Весь курс пиццы переписан 1 в 1.
@artemrudenko8234
@artemrudenko8234 2 жыл бұрын
в index.js нужно убрать React.StrictMode, этот режим вызывает рендер два раза, но только в дев моде
@AKucenko
@AKucenko 2 жыл бұрын
@@artemrudenko8234 ого, спасибо!
@tlegenbayangali
@tlegenbayangali 11 ай бұрын
А как перерендерить IsFive, если счетчик, например, равен 6?
@АндрейЗакревский-ц4у
@АндрейЗакревский-ц4у 3 жыл бұрын
Спасибо , крутая подача материала
@azad0808
@azad0808 3 жыл бұрын
Чел, ты объясняешь реально очень хорошо, доходчиво, и примеры идеальные! Где продолжения??
@1MrGerman
@1MrGerman 3 жыл бұрын
Спасибо за отменный урок!
@I_am_a_programmer
@I_am_a_programmer 11 ай бұрын
Можете пожалуйста сказать почему все функции из коробки не попадают в React.memo(). Мне кажется, так было бы меньше перерисовок. Или может это как-то можно включить в настройках?
@front-cat
@front-cat 9 ай бұрын
Кажется скоро планируется обнова реакта, где из коробки как раз все будет запускаться с memo
@СергейКузнецов-э4я2я
@СергейКузнецов-э4я2я 2 жыл бұрын
Благодарю
@artsiomwithoutme8753
@artsiomwithoutme8753 4 жыл бұрын
Благодарю за видео
@alexforos5425
@alexforos5425 2 жыл бұрын
Спасибо! 👍👍👍
@bzlkch
@bzlkch 4 жыл бұрын
Спасибо!
@nikko374
@nikko374 4 жыл бұрын
Огонь видео!!!
@DagestanShop
@DagestanShop 4 ай бұрын
а нельзя просто в самом компоненте сделать {value === 5 && } ?
@Eagle-q4e
@Eagle-q4e 9 ай бұрын
Арчаков, а где курсы?
@ГеннадийГорохов-ц8н
@ГеннадийГорохов-ц8н 2 жыл бұрын
Супер видео
@petrvictorovich
@petrvictorovich 2 жыл бұрын
Тэээк... Я тут непонял - с чем мы изначально боремся? Почему тяжёлая функция из нижнего счётчика вообще выполняется, когда мы нажимаем верхний счётчик? Потому-что оба счётчика в одном компоненте и всё целиком каждый раз перерендеривается - так что-ли?
@Cindorqw
@Cindorqw 4 жыл бұрын
вот он настоящий контент для миддлов
@alexmotorniy
@alexmotorniy 3 жыл бұрын
спасибо, все очень доходчиво !
@aldarzhai
@aldarzhai 3 ай бұрын
Подскажите, что за тема у вас в вс коде? Если помните, конечно)
@paul.inglsmit
@paul.inglsmit 4 жыл бұрын
Лайк не глядя)
@__xid__
@__xid__ 4 жыл бұрын
Чуть недокрутил, чтобы "Это пять!" показывалось только если счетчик === 5. Надо бы "if (prevProps.value === 5 || nextProps.value === 5) { return false }"
@liadmarsh
@liadmarsh 4 жыл бұрын
А почему не хватит только nextProps?
@__xid__
@__xid__ 4 жыл бұрын
@@liadmarsh Ну так потому что показывается "Это пять!", когда счетчик больше 5.
@ArchakovBlog
@ArchakovBlog 4 жыл бұрын
А зачем компоненту делать 2 раза ререндер? Наша задача была показать "Это пять" только 1 раз, но в твоём случае, компонент будет делать ререндер 2 раза.
@andTutin
@andTutin 2 жыл бұрын
@@ArchakovBlog может потому что "12 это 5" выглядит туповато
@Оди-р1х
@Оди-р1х Жыл бұрын
Но получается prevProps равен 4, а следПропс равен 5
@dav1d05
@dav1d05 2 жыл бұрын
Так получается что useMemo в компоненте isFive уже не нужен, так как проверка пропсов выполняется раньше с помощью memo
@Илья-ж8ч8о
@Илья-ж8ч8о 3 жыл бұрын
Вопрос , а нужен ли уже там useMemo внутри если мы обернули всю компоненту в memo ?
@urek8988
@urek8988 2 жыл бұрын
useMemo, для функций, react.memo для компонента.
@urek8988
@urek8988 2 жыл бұрын
Если ты хочешь чтобы у тебя функция не пересчитывалась, то нужно юзать useMemo, даже если компонента обернута в memo. Это все зависит от ситуации, у тебя например могут обновиться пропсы и компонента перерендарится, но какое-то значение из пропсов указанное в зависимость useMemo не изменится и тогда мемоизированная функция не будет производить перерасчеты..
@egorlazuka8211
@egorlazuka8211 4 жыл бұрын
Спасибо. Про React.memo вообще отлично рассказал. Но почему не рассказал почему все компонтенты/функции не оборачивать.
@ArchakovBlog
@ArchakovBlog 4 жыл бұрын
вылетело это из головы, постараюсь в след. видео с useCallback упомянуть или сделаю отдельное видео, где объясню, когда нет смысла юзать хуки
@thebestmusicforever1
@thebestmusicforever1 4 жыл бұрын
@@ArchakovBlog ждём видео с useCallback, те хуки которые я смог выучить это те, про которые ты рассказывал
@promotezor
@promotezor 3 жыл бұрын
@@ArchakovBlog вот согласен, намного проще воспринимается информация, когда объясняешь где лучше НЕ делать подобное. Кстати, если еще будешь приводить примеры в "боевых" условиях, тогда лучше уроков вообще не придумаешь. Не обязательно показывать код "боевых" проектов, достаточно упомянуть абстракцию! Попробуй пожалуйста, может сделай голосование, зашло людям или нет, оживляй аудиторию!) Мне к примеру совсем непонятно в каких случаях можно НЕ юзать useState, как различать такие вещи... Поэтому я чувствую себя неуверенно. Спасибо за видео!)
@romanprokopets3693
@romanprokopets3693 3 жыл бұрын
крутое обьяснение, спасибо
@vladimirww5152
@vladimirww5152 3 жыл бұрын
Полезно!
@aleksandrgradov7859
@aleksandrgradov7859 2 жыл бұрын
спасибо!
@КириллДемидов-с8и
@КириллДемидов-с8и 2 жыл бұрын
React.memo со своим условием проверки это хорошо, вот только компонент IsFive не меняется обратно после того, как мы перевалили за 5, при 18 он так же будет показывать "Это пять" ))) Что можно сделать в этой ситуации?
@darnelo7606
@darnelo7606 Жыл бұрын
Первая идея - рендерить также, когда nextProps.value === 6
@vitalimalyshkin282
@vitalimalyshkin282 2 жыл бұрын
Всем привет! Кто знает, почему счетчик в варнинге увеличивается на +2, а не на +1 как у автора? т.е. был 0 при инициализации, потом в варнинге он становится 1, а при перерендере до следующего варнинга, если законсолить пишет уже 2) соответственно в варнинге выводится уже 3) никак не могу понять почему так происходит)
@artemrudenko8234
@artemrudenko8234 2 жыл бұрын
в index.js нужно убрать React.StrictMode, этот режим вызывает рендер два раза, но только в дев моде
@user-888azim-97
@user-888azim-97 3 жыл бұрын
не поняла, когда юзэффект применять, а когда юзмемо...... что за костыли на 2:20 ? попробовала эффект который срабатывал 7 раз вместо одного заменить на юзмемо, в итоге стало срабатывать 14 раз)) и почему нельзя проще сказать, если у мемо вторым параметром идёт тру, то он вернёт предыдущее -- так же легче воспринимать инфу, типа, всегда ставь выражение для возвращения мемоизированного значения без перерисовки. а в shouldComponentUpdate наоборот.
@andTutin
@andTutin 3 жыл бұрын
Разные хуки, область применения разная совершенно
@user-888azim-97
@user-888azim-97 3 жыл бұрын
@@andTutin да у вас дар объяснять доходчиво (((( они оба выполняются только при изменении зависимостей. в каких случаях эффект, а в каких юзмемо? я только про разницу мемо и юзмемо поняла.
@araikrasoyan702
@araikrasoyan702 3 жыл бұрын
Спасибо
@ИларионИларион
@ИларионИларион 2 жыл бұрын
Если в IsFive убрать useMemo но оставить React.memo то ничего не меняется в результате, получается что при использовании React.memo в конкретном данном примере useMemo становится бесполезен ?
@НурсултанТашанов-б8г
@НурсултанТашанов-б8г 4 жыл бұрын
Лучший!!!
@jenyaspace
@jenyaspace 2 жыл бұрын
а что делать если сам по себе 1 count вызывается много раз при одном клике(((
@STALINGRADETS
@STALINGRADETS Жыл бұрын
*Так при count2 >= 6 выводится надпись "Это пять". Не порядок.. Понятно как пофиксить: if(nextPropx.value === 5 || nextPropx.value === 6)*
@kvashenka3716
@kvashenka3716 4 жыл бұрын
Подскажи пожалуйста, что за тема на VS Code у тебя стоит, уж очень понравилась)
@АлМ-ы8ъ
@АлМ-ы8ъ 3 жыл бұрын
У меня почему то при каждом рендере счетчик (в консоли который смотрим) аккурат на 2 увеличивается) че за хрень может быть? код с гитхаба скачал
@ОлегОвчинников-щ9с
@ОлегОвчинников-щ9с Жыл бұрын
🔥🔥🔥🔥🔥🔥🔥
@СергейВер-и9ю
@СергейВер-и9ю 3 жыл бұрын
Возможно глупый вопрос, но как лучше совместить с Redux?
@gatrianL
@gatrianL 4 жыл бұрын
что usememo что usecallback не совсем понятно в каких именно случаях их нужно применять
@dzhabulya
@dzhabulya 4 жыл бұрын
useCallback. Посмотри пример: codesandbox.io/s/nervous-leakey-ykz0l?file=/src/App.js. Открой консоль и смотри ререндеры второго компонента когда меняешь счетчик. А потом попробуй версию функции обернутую в useCallback. Ререндеров нет. Почему так. Потому что каждый раз когда ты ререндерится твой компонент, создаются заново все функции и соответственно ссылки на них тоже меняются. Компонент, обернутый в memo, делает сравнение вида: prevProps === currentProps и если оно false, то ререндер произойдет. А так как ссылки на функцию всегда разные, то рендер будет происходить постоянно и в твоей memo нету смысла. useCallback позволяет запомнить ссылку на функцию и пересоздавать ее только когда изменятся зависимости. useMemo. Пример: codesandbox.io/s/nostalgic-varahamihira-l041z?file=/src/App.js. Попробуй написать текст в инпут и ты увидишь что с каждым твоим вводом обновляется state text, происходит ререндер и, соответственно, запускается функция фильтрация пользователей, хотя в этом нет абсолютно никакой необходимости. useMemo позволяет тебе рассчитать их один раз и пересчитывать только в тот момент, когда изменятся зависимости.
@ArchakovBlog
@ArchakovBlog 4 жыл бұрын
@@dzhabulya чел, можешь сделать отдельный коммент? я его закреплю
@dzhabulya
@dzhabulya 4 жыл бұрын
@@ArchakovBlog Да, конечно брат
@mayer9228
@mayer9228 4 жыл бұрын
useMemo - когда у тебя в компоненте есть сложная функция возвращающая что-то, например, какая-то сортировка, и ты не хочешь, чтобы она выполнялась при каждом рендере. Если не поменялась зависимость - функция просто выдаст результат из предыдущего рендера не вызывая саму сортировку. useCallback - когда нам нужно передать какую-то функцию в какой-то компонент через пропсы, который обёрнут в memo. Дело в том, что memo не может проверить функции, так как две даже одинаковые функции не равны. Поэтому мы и говорим memo через useCallback, что это та же функция. Второй вариант - передать функцию как зависимость в какой-то хук. Что то, что другое - не нужно использовать везде подряд, а только при необходимости.
@sqpine
@sqpine 2 жыл бұрын
Reselector уже не актуальный?
@avmru
@avmru 3 жыл бұрын
Спасибо тебе, добрый человек, за вторую функцию в React.memo! Мне только одно не понятно - почему все другие это скрывают?
@ArchakovBlog
@ArchakovBlog 3 жыл бұрын
Ее практически не юзают, только в очередь редких исключениях. Например, когда нужно проверить конкретные свойства, а не соответствие всех пропсов
@avmru
@avmru 3 жыл бұрын
@@ArchakovBlog я реакт начал изучать 3 месяца назад. такой вот новичковый новичок. но уже пилю коммерческий проект. программирую уже давно, так что не проблема навешать чего-нибудь вплоть до "слушателей" и перехватывать управление ещё на уровне "железа" (ассемблерное прошлое). но случилась у меня одна компонента, что я только не делал, она перерисовывается по нескольку раз на каждый чих, большинство из которых к ней вообще не имеют никакого отношения. получилось вылечить ситуацию только этой второй функцией. поэтому, ещё раз огромное спасибо!!!
@avmru
@avmru 3 жыл бұрын
@@ArchakovBlog и ещё надо сказать, что да, я согласен с людьми, которые хвалят Вашу подачу материала. до Вашего урока я посмотрел несколько уроков про хуки. все рассказывают и показывают, вроде, всё что нужно. и, вроде, как бы действительно не сложно. но так до конца и не понял. и только после того, как Вы показали в подробностях, КАК ЭТО РАБОТАЕТ, у меня в башке всё встало на свои места.
@ВикторКулагин-ь2у
@ВикторКулагин-ь2у 4 жыл бұрын
Класс!
@from_brest2631
@from_brest2631 3 жыл бұрын
Ну красавец, больше нечего сказать.. Раздербанил, разжувал ив рот положил :)
@БогданХоній-т7е
@БогданХоній-т7е 3 жыл бұрын
А как же пофиксить баг когда на счетчике больше 5, но IsFive пишет что это 5?
@zzzzüp
@zzzzüp 3 жыл бұрын
else if (prevProps.value === 5 && nextProps.value !== 5) { return false }
@hoops_quotes_shorts
@hoops_quotes_shorts 4 жыл бұрын
Пушка!
@MaxKievSky
@MaxKievSky 3 жыл бұрын
Будет ли react.memo перерендеривать компонент если в нем постоянно отробатывает scss анимация а пропсы не меняются?
@ArchakovBlog
@ArchakovBlog 3 жыл бұрын
Нет
@MaxKievSky
@MaxKievSky 3 жыл бұрын
@@ArchakovBlog и анимация не остановится?
@MDFireX5
@MDFireX5 3 жыл бұрын
вообще не понял, а какого фига первый счетчик обновляется вместе со вторым, я повторил и у меня такого нету
@ФеликсДуйшебеков
@ФеликсДуйшебеков 4 жыл бұрын
Здравствуйте. А будут ли уроки по mobx?
@ArchakovBlog
@ArchakovBlog 4 жыл бұрын
Привет! В ближайшее время не будет
@JohnDoe-p1y
@JohnDoe-p1y 2 жыл бұрын
Спасибо. Отличное видео. Есть два логичных вопроса: Почему бы не юзать react.memo на всех компонентах? И зачем делать кастомные проверки для ререндера если смысл ререндера в том и заключается чтобы ререндерить компонент при изменении любых пропсов а не каких то отдельных. Ведь если пропс меняется а мы не хотим при его изменеии производить ререндер то почему бы его не сделать не пропсом а внутренней переменной? Или лыжи не едут... ну может кто то мне и объяснит(если привидёте пример буду признателен) PS После Vue, React весь как огромный костыль с кучей потенциальных проблем.
@vladk3111
@vladk3111 2 жыл бұрын
Я тебе скажу так, что есть ререндер компонента, который занимает 1-2 мс и особо на производительность не повлияет. И у тебя может таких 20 компонентов. Обернув всё в memo ты увеличиваешь свой код ненужной мемоизацией. В мемо нужно оборачивать реально тяжелые ререндеры (запросы-ответы с сервера, тяжелые вычислительные функции). Иногда у тебя есть запросы-ответы с сервера, которые ты выполняешь только 1 раз в самом начале рендера, поэтому ты эту функцию оборачиваешь в useEffect. Иногда есть инфа с сервера, которую нужно проапдейтить исходя из кликов юзера, но часть из этой информации не поменяется. Та часть, которая не поменяется - оборачиваешь в useMemo и кешируешь. А ререндеришь только тогда, есть в этом необходимость. Если ты всё обернёшь в useMemo, то с развитием проекта, возможно, появятся новые компоненты и зависимости со старыми, которые нужно пересчитывать исходя из новых, а ты уже всё пооборачивал в useMemo, удалять обратно будешь, херня получится.
#5: React Hooks - useCallback
23:54
Archakov Blog
Рет қаралды 52 М.
#3: React Hooks - useRef
27:52
Archakov Blog
Рет қаралды 67 М.
It’s all not real
00:15
V.A. show / Магика
Рет қаралды 20 МЛН
Mastering React Memo
26:56
Jack Herrington
Рет қаралды 137 М.
Зачем на самом деле нужен хук useCallback
8:33
Михаил Непомнящий
Рет қаралды 45 М.
React Hooks - Полный Курс (Про Все Хуки в 1 видео!)
1:47:00
Владилен Минин
Рет қаралды 450 М.