87 - shouldComponentUpdate, PureComponent, memo - React JS

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
shouldComponentUpdate (должна компонента обновиться) - это метод жизненного цикла. React вызывает этот метод у компоненты, чтобы спросить компоненту: нужно ли вызывать повторно render, получу ли я, React, от тебя новый JSX. Для этого я дам тебе, компонента, новые пропсы и стейт (а может и не новые, а те же самые, что и были ранее) и ты на основе логики своей внутренней верни мне из этого метода true или false... Если вернешь false, то я не буду вызывать render
Метод и крут и опасен. Есть много деталей. Тем не менее он крут))) Можно сделать поверхностное сравнение объектов и понять, изменились ли данные на входе компонент (props + state), что повлияет на выход (JSX).
Такую простую проверку в этом же методе делает компонент PureComponent. И если мы отнаследуем нашу классовую компоненту не от React.Component, а от React.PureComponent, то мы получим реализованный за нас метод shouldComponentUpdate.
Это касается классовых компонент. А как нам автоматизировать перерисовку (не вызывать перерисовку, если это не нужно) для функциональных компонент? Для этого есть HOC (High Order Component) React.memo, на вход которого мы подаём компонент, который хотим оптимизировать, а на выходе получаем контейнерную компоненту, которая займётся этой проверкой и перерисовкой (хз, наверное внутри создаётся классовая контейнерная компонента PureComponent, но это неточно, нужно гуглить)... Напишите в комменте, если знаете ответ или нагуглили.
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#shouldComponentUpdate #PureComponent #memo #reactJS

[@temosmoev7645]

я одного не могу понять, как this.porps !== nextProps может вернуть false, ведь ето два разных объекта, свойства которых одинаковы, или я не прав?. ведь ето тоже самое что и написать {}!=={}.

[@ITKAMASUTRA]

О май гад! Зарекся больше не писать ничего так поздно ночью, потому что порою несу чушь! Конечно же, ту псевдопроверку, которую делал, она некорректная! Хорошо, что запрыгнул в комменты! Спасибо за вопрос!✊

[@user-san-chous]

@@ITKAMASUTRA значит, наверное, правильная проверка будет типа return this.state.value != nextState.value; т.е. сравнивать нужно конкретные приходящие данные с пропсов либо стейта, видимо

[@dancraig2758]

@@user-san-chous Вероятно лучше написать свою функцию, которая будет рекурсивно прходить вглубь объекта и сравнивать его примитивы

[@user-san-chous]

@@dancraig2758 ну тогда это очень редкий случай, когда такое будет действительно оправдано в плане потраченного времени и реальной пользы.

[@Temp12189]

в доках кстати написано проверку this.props !== nextProps использовать

[@SamSiMmP]

Только что узнал, что моя подруга получила оффер!! С первого собеса. Шёл 2024 год. Я так рад, что решил увековечить это тут. Молодец, Ниныч 🦾

[@user-ef5xh4ty1l]

круто!значит не все потеряно:))

[@user-dw7uu9wo1v]

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

[@user-hz7ix3hf1r]

Сейчас когда компонент обернут в функцию connect, он автоматически выполняет проверку на изменения props и перерисовывает компонент только в случае изменения props. Это происходит благодаря встроенной оптимизации React, которая называется shallow equality проверкой props. Таким образом, обычно не требуется явное использование shouldComponentUpdate, если вы используете connect и mapStateToProps, так как React самостоятельно управляет обновлением компонента при изменении props. Однако, если у вас есть случаи, когда вам нужно специально контролировать логику обновления компонента, вы все еще можете использовать shouldComponentUpdate в ваших компонентах, даже если они обернуты в connect.

[@jemilsuleimanov209]

Для тех у кого классовая компонента рендерится 2 раза, даже с PureComponent. Долго не мог понять почему такое происходит, в пропсах никаких обновлений стейта не прилетает, что бы происходил ререндер, выяснил что два раза рендерится еще до того как компонент монтируется. Как оказалось сам компонент тут не причем. Прочитал в статье на медиуме, что все дело в ReactStrictMode которым у меня был обернут App, в index.js. Этот стрикт мод помогает лучше отлавливать ошибки разработчикам, поэтому и рендерится по два раза. Если его убрать, рендер происходит один раз. Надеюсь кому-то помогло и лишило головной боли :)

[@TatianaKlimenko]

Спасибо! Я долго не могла понять почему 2 раза рендер происходит.

[@asmodeus7862]

Спасибо! Целый месяц не мог понять в чем дело;)

[@araikrasoyan702]

Ребята, все кто из 2021, это всё уже не нужно, сама компонента рендерится уже один раз при одинаковыми пропсами, поэтому можете скипнуть видос и идти дальше!

[@vadimsabadosh5468]

Плюсую. В новых версиях реакта это пофиксили

[@vlad-zf1ev]

++ коммент в закреп

[@kamal_kurbanov]

Закрепите комент

[@zipri9576]

надо было перед уроком комменты почитать)

[@user-so1bu9cw5g]

Мммм... Нет. Попробуй переписать компоненты с мемоизацией и проследи отрисовки. Ps мемоизация нужна PsPs если не прав, можете закидать помидорами

[@interpol2138]

Немного справки. 1. Используйте shouldComponentUpdate(), чтобы указать необходимость следующего рендера на основе изменений состояния и пропсов shouldComponentUpdate() вызывается перед рендером, когда получает новые пропсы или состояние. Значение по умолчанию равно true 2.React.PureComponent похож на React.Component. Отличие заключается в том, что React.Component не реализует shouldComponentUpdate(), а React.PureComponent реализует его поверхностным сравнением пропсов и состояния.Кроме того, метод shouldComponentUpdate() базового класса React.PureComponent пропускает обновление пропсов для всего поддерева компонентов. Убедитесь, что все дочерние компоненты также являются «чистыми». 3.React.memo - это компонент высшего порядка.React.memo затрагивает только изменения пропсов. Если функциональный компонент обёрнут в React.memo и использует useState, useReducer или useContext, он будет повторно рендериться при изменении состояния или контекста.Этот метод предназначен только для оптимизации производительности. Не полагайтесь на него, чтобы «предотвратить» рендер, так как это может привести к ошибкам.

[@interpol2138]

p.s Так же HOOK useMemo. Для мемонизирования значения и оптимизации рендера и производительности(Да тема немного другая и не сильно относиться к чистым компонентам!) const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Передайте «создающую» функцию и массив зависимостей. useMemo будет повторно вычислять мемоизированное значение только тогда, когда значение какой-либо из зависимостей изменилось. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере.

[@interpol2138]

p.s.s И еще небольшое отступление. Этот и следующий урок по сути рассказ о чистых компонентах: 1 Для компонентов класса react предоставляет React.PureComponent базовый класс. 2 Для функционального компонента react предоставляет React.memoHOC (компонент более высокого порядка). Главная суть урока. Работа с перерендером компонентов, оптимизация работы с компонентами и проверкой изменения стейта.

[@theWorldIsMultivariate]

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

[@vladdd2164]

2023 У меня рендеров myPost 1 а не 3, видимо пофиксили в реакте, shouldComponentUpdate, PureComponent не стоит использовать, как и классовые компоненты, React.memo или хук useMemo позволяет вам закешировать вычисления между несколькими рендерами, путём запоминания прошлого результата, но использовать их надо действительно в тех местах, где это будеть эффективно, т.е скорость снижена в разы kzbin.info/www/bejne/mGnJdHqOiZtjmJY&ab_channel=ArchakovBlog

[@tema_skakun]

ты говоришь "Не полагайтесь на него, чтобы «предотвратить» рендер, так как это может привести к ошибкам", а где пруфы, почему ты так думаешь? memo используют как раз для оптимизации производительности как раз за счёт предотвращения лишнего рендера. вот тут Александер Бальцевич рассказывает про memo kzbin.info/www/bejne/eqaqd6OumbpmjK8&ab_channel=%D0%90%D0%B9%D0%A2%D0%B8%D0%A1%D0%B8%D0%BD%D1%8F%D0%BA

[@vseslavr]

Этот курс - святой грааль в мире Реакта! Благодаря этим курсам устроился на работу (всего 3й месяц пошел, но все же...). Сейчас столкнулся с проблемой, что компонента ререндерится на каждый чих, хотя это не нужно. Пересмотрел данный урок и все починил используя React.memo. Да, я в любой момент мог зайти и почитать документацию реакта (что я и сделал сразу), но Димыч все обьяснил и по полочкам разложил, а это очень важно. Огромное тебе спасибо, Димыч! Ты просто лучший! Летим!

[@annastatcenko2948]

Все, супер! Memo, shouldComponentUpdate, PureComponent

[@viktorshatalov1920]

димыч рассказывает про позоры на собесах, как будто рядом со мной сидишь и слушаешь и за голову хватаешься))))))супер как всегда!!!Лучший курс react на русском языке!!!!спасибо

[@territory_of_manifestation]

смотрю обычно 2x, так не привычно с обычной скоростью воспроизведения)))

[@Alex-ge7jt]

Димыч на 1x и на 2x - два разных Димыча)

[@user-sj6tb7od6s]

смотрю обычно 0,75

[@viteksmarket9711]

Я просмотрел до 75го на 1,5х а потом что-то решил подзадуматься и переключил на 1. Походу Димыч как бухой :) ржака такая класс. А вообще красавчег!! Педалю на джавке и на С/С++ уже лет надцать и решил юай подтянуть. Ты молодец! Я сам иной раз веду митапы, и твои видосы заставляют поддерживать высокий уровень. Еще раз красавчик от души! React, redux, thunk, shouldComponentUpdate, PureComponent, memo все что нужно в React здесь есть\!

[@vladimirww5152]

и я так же!) Признаюсь, что в некоторых моментах на х2.5 ставил😁😁

[@vladimirww5152]

Это если кто не умеет, вбейте в строку адреса или создайте ссылку в панели закладок и кликайте по ней: javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 2.5;

[@annatugbaeva6701]

Вот как должно начинаться идеальное утро! ✌🏾

[@ITKAMASUTRA]

:)) задротка))

[@annatugbaeva6701]

IT-KAMASUTRA да нее 😂

[@sanbuz]

Спасибо. shouldComponentUpdate, PureComponent,memo, React.memo

[@marsonleonardovich4036]

Like! Летим дальше! shouldComponentUpdate, PureComponent, memo

[@itweb7157]

Дмитрий, благодарю за видео! #shouldComponentUpdate, #PureComponent, #memo - #ReactJS

[@shantarampampam]

shouldComponentUpdate React. Memo. Pure Component. React. Jsx. Redux. Javascript. The best lesson

[@user-cy4cz7zx4m]

Все здорово shouldComponentUpdate, PureComponent, memo - React JS.

[@nuriddintashpulatov4233]

Наконец-то я смогу воспользоваться своими знаниями о мемах на практике! Тысячи часов потраченных на просмотр мемов прошли не зря, стану программистом теперь

[@user-ec4wi6nq3y]

Надеюсь, у Айрапета всё хорошо, не зря у вас учился и успешно трудоустроен.

[@user-ez7lk9kx6j]

shouldComponentUpdate очень полезный метод.

[@user-in5qb3ml4l]

Летим !

[@fargutvest]

Оптимизация чтобы лишний раз не вызывался рендер детерминированность, идемпотентность shouldComponentUpdate(nextProps, nextState) - можно внутри написать проверку изменились ли props или state и если нет вернуть false и компонента не перерисуется а можно вместо заэкстендиться от PureCompenent вместо Component и тогда не нужно писать shouldComponentUpdate, проверка сделается автоматически внутри PureCompenent А если мы не хотим использовать классовую компоненту, то можем использовть функцию React.memo (наверное это HOC), обернув ею функциональную компоненту React.memo(props=>{ some code; return () } ) Круто Спасибо! React Redux

[@ITKAMASUTRA]

Спасибо за крутые комменты!

[@fargutvest]

@@ITKAMASUTRA Димыч, спасибо что заценил! Это такой мини конспект для себя и для других)

[@Vllad_Ko]

Круто, самый большой плюс в этом крутом курсе React Redux это даже не супер изложение всяких там HOC (High Order Component) React.memo и shouldComponentUpdate , а мотивация, даже так МОТИВАЦИЯ! Заряд на трудоустройство.

[@user-vj8hj9jk2b]

shouldComponentUpdate is a lifecycle method of class component позволяет оптимизировать приложение, исключая перерисовки virtualDOM. Можно опустить это метод, если использовать class Man extends PureComponent вместо class Man extends Component. Аналогом PureComponent для функциональной компоненты является обертка HOK React.memo(). Как всегда материал изложен круто). Респект и спасибо.

[@maxim.saharov]

круто расписал - Спасибо!

[@IgniosTyumen]

По поводу инкубатора... На мой субъективный взгляд те, кто дошел до этого этапа, хотел бы попасть на курсы субботы, чтобы попрактиковаться с проектами и тестовыми заданиями=) И спасибо за лучшие уроки по ReactJS lifecycle shouldComponentUpdate override React.PureComponent memo!

[@seriogaromanchykov9451]

Огромная благодарность!!! shouldComponentUpdate, PureComponent, memo классный урок,как всегда 2023

[@slavapush]

Всем тебя рекламирую, замечательный курс

[@amaxe12345]

Спасибо Димыч! shouldComponentUpdate, PureComponent, memo - React JS #shouldComponentUpdate #PureComponent #memo

[@xikikamori2327]

Благодарю за урок

[@dogober3861]

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

[@davitgaspar8260]

shouldComponentUpdate, PureComponent, memo - React JS

[@mikhail_shokun]

Димыч, все супер, летим дальше #shouldComponentUpdate #PureComponent #memo #React_JS

[@user-bd4lw9hx3s]

Дмитрий удивительный человек! Доброта и ум такое прекрасное сочетание! Обожаю его подачу! Лучший курс по React - Redux! IT-KAMASUTRA, вперед!

[@user-pc9bl7uf1l]

Как всегда, огонь! Мотивируешь нас заниматься даже по ночам!!! ;)

[@user-px5ji9mc1n]

shouldComponentUpdate, PureComponent, memo - React JS - нечеловеческое спасибо Димыч!

[@adrenalineMSC]

Спасибо друг, в очередной раз, благодарен тебе за каждый урок, приятно слушать !

[@unskeptik]

Досрочный лайк!

[@user-ei5zp2qi4j]

Спасибо друг за твой нелегкий труд.

[@user-fn8pu8xk6q]

Спасибо, ценные уроки. Хорошо объясняешь, очень доволен что решил посмотреть твои видео.

[@kub1k]

Спасибо за лучшие уроки по React-Redux

[@ruslanla4654]

React ShouldComponentUpdate memo путь Самурая- летим вперед

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@derrylsshowhh3249]

Харош,спасибо!

[@gurgenal4401]

Спасибо за работу, ты стратегический важный человек

[@horizon1889]

Большое спасибо за видео, хорошее дело делаешь!). Удачи тебе !

[@sergeypeksymov6549]

Очень годно обьяснил. Спасибо, Димас

[@hennadiipetrov1967]

Ты крассаввваа!) мега-альтруист) спасибо

[@StanislavObrazcoff]

Очень полезный совет по React.memo!

[@semial]

Спасибо за урок, Димыч!!!

[@startrek9425]

Ты крут, спасибо за уроки сенсей!!!

[@ervinabliamitov2149]

Спасибо Дмитрий, респект и уважение!

[@is_eliseeva]

Дмитрий, спасибо за мотивацию и знания!!!

[@trotill007]

Димыч, спасибо! Отлично разъяснил про pureComponent и React.memo!

[@Evgeny..]

shouldComponentUpdate, PureComponent, memo - React JS Спасибо за урок

[@pavelananich4867]

Димыч, спасибо тебе. Прошел инкубатор, трудоустроился, но до сих пор пересматриваю некоторые видосы и открываю для себя много нового 👍

[@marina-ej4qd9kc1wh]

Cупер видео про memo, shouldComponentUpdate, PureComponent. Скоро начну пересматривать курс, как Димыч говорит

[@Al4ii]

shouldComponentUpdate, PureComponent, memo

[@denysm5599]

Благодарю за урок. Интресно было узнать такие особенности React, как shouldComponentUpdate, PureComponent, memo.

[@eugene-dmitrievich]

Спасибо большое за урок!!! shouldComponentUpdate, PureComponent, memo теперь более понятны

[@user-mk5vt9en4u]

никогда не поздно взять себя в руки)

[@mariia6820]

Как всегда,объяснил очень доходчиво,разжевал и разложил по полкам shouldComponentUpdate, PureComponent!

[@bohdanatamaniuk6776]

Супер, найкращі курси по React-Redux! Спасибо Димыч!

[@user-ck7rb1hg8o]

Спасибо за качественный курс! React, Redux, shouldComponentUpdate, PureComponent, memo

[@user-dc1cr5ny3q]

Как всегда спасибо за крутое объяснение shouldComponentUpdate, Purecomponent и memo, летим дальше!!))))

[@shantarampampam]

У тебя просто лучшая философия)) Насчет образования

[@user-bl4dl9ke7b]

Спасибо

[@vitaliidrapaliuk5652]

Спасибо)

[@konstantinkuksov914]

shouldComponentUpdate, PureComponent, memo, react js - круто, спасибо, Димыч!

[@savkaviktor]

1:10 - самое важное понимание) поэтому и курс наверное столь живой и настоящий! Благодарю)

[@synchronization666]

Спасибо!

[@johnnysel8186]

божественно !!!

[@RedSkyWan]

Продолжаю изучение - 21-ый день - 87/100 Димыч, спасибо за труд!

[@user-cy4cz7zx4m]

Спасибо за урок

[@Vlad6817]

Спасибо тебе брат!!!

[@miguelgrushetckii4839]

Спасибо Димыч! крутой выпуск! React, Redux, shouldComponentUpdate, PureComponent, memo

[@a_mexdiev]

спасибо

[@user-tr8hr4xm1l]

Нравится как Димыч ведёт уроки :-) Приятно слушать, информация по React разбавлена лирическими отступлениями и хорошо усваивается! Понравилась фраза в конце видео "если вы забыли о чём я говорил до этого, напомню вам"

[@user-hg6im5cg2i]

Во имя народа, во имя людей классно сказано, а главное то, что ты делаешь это для нас.Огромная благодарность!!! shouldComponentUpdate, PureComponent, memo классный урок,как всегда все предельно ясно.

[@user-bl4dl9ke7b]

Тема shouldComponentUpdate, PureComponent, memo понятна =) спасибо!

[@messivatague]

Всё круто!

[@maaaa8697]

спасибо, Димыч!

[@marina-ej4qd9kc1wh]

Спасибо! shouldComponentUpdate, PureComponent, memo - спасибо за объяснение. Скоро начну пересматривать курс, как Димыч говорит

[@ivanmiarkulau8320]

Полезная инфа о shouldComponentUpdate, React.memo and PureComponent, спасибо!)

[@user-pv5is5pz4j]

Спасибо за урок! shouldComponentUpdate, PureComponent, memo

[@johnmj750]

Блин, Димыч! Спасибо тебе за ВСЕ!!! За такие слова!!! То, что ты говоришь, это супер важно услышать!!!! Храни тебя Бог!!!

[@dw_tv3992]

Димыч ты красава уважуха и благодарность тебе shouldComponentUpdate pureComponent memo

[@Snegurjan]

Спасибо за напутствие Сенсей)

[@adastraperaspera0264]

С утра как обычно, кофе =)

[@dimitriitkach7697]

spasibo za urok - 87 - shouldComponentUpdate, PureComponent, memo - React JS

[@bamboleylo_by]

Димыч! Огромное тебе спасибо за твои труды и мотивацию, обязательно тебя буду рекомендовать друзьям и знакомым. P.S У меня рендерилось 1 раз и без memo, возможно, это связано уже с более новой версией реакта.

[@user-iz9is7wm9d]

спасибо, интересные темы shouldComponentUpdate, PureComponent, memo

[@tanyatritelnitskaya1911]

Дима, спасибо! ShouldComponentUpdate, PureComponent, memo!

[@user-di9dd7bb4l]

shouldComponentUpdate, PureComponent, memo - React JS Спасибо за курс!!!

[@plotitsyn]

Отличное видео по React JS и shouldComponentUpdate, PureComponent, memo в частности. Успехов! На подлете к "сотке"...

[@user-sw6jv3ot4z]

літо 2020 - функціональна компонента відпрацьовує один раз і без React.memo. Але треба бути уважними з пропсами і перевіряти чи дійсно в компонент йде лише потрібна їй інформація. Бо спочатку робила з React.memo а рендер спрацював тричі, полізла дивитись, що ж саме передаю і з'ясувалось, що весь стейт profilePage, а потрібно було лише пости з нього. Виправила і все ок. Для себе записала, що React.PureComponent те саме, що і React.Component в купі з shouldComponentUpdate для класових компонент

[@alexeygolovanov6150]

Димыч. От души!!))

[@__online7250]

#shouldComponentUpdate #PureComponent #memo #reactJS Оптимизация!

[@STRIPPEDSTAR]

Во имя Народа, во имя Людей! - Сильно сказано)

[@annabolbot1228]

cпасибо, Димыч!

[@lenapeleka197]

Луууучший !!!!!!!!!