74 - React JS - componentDidUpdate

[@quantumvector1783]

Три раза пересмотрел, чтобы понять, какого чёрта тут происходит. Короч, объясняю, как я понял. Смотрите, когда мы обновляем страницу, происходит два телодвижения: this.props.getUserProfile(userId) и this.props.getStatus(userId). Каждый из этих запросов ждет ответа от сервера. Если профиль приходить БЫСТРЕЕ чем статус, то рендер происходит с ОДНИМ НЮАНСОМ - так как сервер нам ещё не прислал ответ со статусом, то в ЛОКАЛЬНЫЙ стейт записывается ПУСТОЙ статус, потому что он у нас в глобальном стейте тоже пустой. Затем, когда уже от сервера приходит ответ со статусом, то происходит новый рендер, где мы видим статус на странице, так как он записался в глобальный стейт и соответственно есть в глобальных пропсах, НО статус в ЛОКАЛЬНОМ стейте НЕ МЕНЯЕТСЯ и остается ПУСТЫМ. В итоге при даблклике в инпуте будет пустота. Тут самое главное понять, что рендер происходит молниеносно. Мы не видим первый рендер с пустым статусом, а видим только итог второго, когда статус уже пришёл и отображается на странице, но не в импуте. Так как локальный стейт уже сформировался с пустым статусом в первом рендере, то во втором рендере статус туда уже не запишется и поэтому будет пустой инпут. Для этого нам и нужен componentDidUpdate, который всегда вызывается при каждом новом рендере. Когда у нас происходит второй рендер, мы сверяем старые пропсы в локальном стейте с новыми пропсами из глобального. Если они различаются, то с помощью setState изменяем пустой статус в пропсах локального стейта на новый статус, который пришел в новых пропсах. Надеюсь, я всё правильно понял, поправьте, если что-то не так. Лайкосик, если помог.)

[@hemul1019]

да, если поставить debugger в componentDidUpdate, обновить страницу, то можно увидить, как меняются пропсы.

[@Sergey30838]

вникнул сам за 40 мин, потом прочитал твой коммент, убедился что правильно все понял спс)

[@AndriiNakonechnyi-f3y]

От души, разобрался с помощью твоего сообщения! =)

[@Max-xj7dw]

Отличное обьяснение, но остается один вопрос - почему статус в локальном стейте не меняется когда меняется глобальный? он ведь инициализируется как state: this.props.state, а значит должен меняться когда меняется глобальный стэйт.

[@quantumvector1783]

@@Max-xj7dw Потому что локальный стейт инициализируется при первом рендере и дальше живет своей жизнью. Да, после того, как пришел статус, происходит новый рендер, но локальный стейт остается тем же, он не обновляет данные и сохраняет значение, которые были ему переданы при первом рендере. Для этого нам надо дать указание, при каких условиях он должен обновить данные в локальном стейте, поэтому мы и вводим метод componentDidUpdate где вручную сравниваем старые данные локального стейта с новыми пропсами и если они отличаются, то обновляем локальный стейт.

[@Оленка-р2н]

Как представлю, сколько времени нужно было потратить на этот курс , записывая видео... Спасибо за эти бесценные знания!!!!

[@evgeniyprowork]

Если кто то столкнется с тем, что в конце видоса у вас статус не сохраняется после обновления страницы браузера, в файле ProfileContainer не забудьте в userId указать именно ваш ID, который указан в профиле на сайте social-network

[@אסתרבובר]

Огромное спасибо!!!

[@tootlno3774]

заработало)

[@vitwaladzko7897]

Большое спасибо, мужик!!!

[@marinakudlatskaya5255]

человечище!!!! спасибо!!

[@mamkindotker]

Кстати кто заметил или нет, но каждый кто зарегался в API становиться частью соц сети, поэтому делаем вывод , что все люди в этой АПишке живые. И все что вы пишете в статусе увидят те кто придут после вас, поэтому вы можете оставлять послания в своих статусах для следующего поколения так сказать :D

[@oleksiipoltavets7158]

Відчуваю - скоро знайду роботу реакт розробником) вже пальці сверблять ) Дякую Дімич за чудовий курс!

[@YaroslavEx]

і як, закінчили курс?)

[@ВикторКысса-я8х]

Супер видос про componentDidUpdate !!! Чтобы не писать постояно console.log() - можно написать любое выражение которое хочешь вывести в консоль и в конце написать .log , тебе высветит выбрать console.log, выбираешь и у тебя всё автоматом оборачивается в console.log, очень удобно )) Лучшие уроки в 2019 году по React.js и Redux

[@ITKAMASUTRA]

Хм.. фига себе... проверю!

[@БорисЦ-ю8ы]

xxx.log и потом сразу Tab нажать и всё, превращается в console.log(xxx); Круто! Возможности Шторма неисчерпаемы )

[@UstinBelarus]

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

[@maximparmon9534]

В атоме пишем просто букву l (или слово log), затем Tab и мы попадаем сразу внутрь консоль лога, тоже удобно

[@-game9406]

а я вообще с помощью мысли код печатаю

[@secondnamefifthname]

У тебя ох****ая физиономия! Сразу настроение поднимает. Отличный урок

[@ITKAMASUTRA]

Ахах) ну круто! Летим!

[@is_eliseeva]

2024-06-02 уже лето, второе лето я изучаю #react. раньше изучала самостоятельно, сейчас изучаю вместе с #itincubator. уже 74 выпуск, четверг, знаний прибавляется, относительно нуля так вообще сдвинулось дело =) буду продолжать двигаться вперед. Дмитрий и комнда, спасибо за мотивацию и поддержку!

[@ITKAMASUTRA]

Успехов! Победа ближе, чем кажется!🤝

[@mamkindotker]

Спасибо тебе за урок и за твой позитив! Ты заряжаешь не бросить этот тернистый путь маленького самурайчика! :)

[@Parmax885]

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

[@bugaga8144]

Моя третья попытка пройти курс наконец поставила исторический рекорд, здесь я еще не был не когда.Бомбим дальше...

[@keepworking2705]

тоже третья попытка, но предыдущий рекорд был уроке на 40-м где то)

[@bugaga8144]

@@keepworking2705 Давай, давай, я уже fullstack разработчиком стал))

[@eugene-dmitrievich]

Спасибо большое за урок!!! React JS - componentDidUpdate супер

[@sergiystebelskiy2863]

Каждый видос - плюс один год жизни и минус один градус в аду

[@ITKAMASUTRA]

Супер настрой!! Летим!!!!

[@Moroir]

С минус один градус важно вовремя остановиться, а то можно Хельхейм устроить)

[@gandalf-butStillNotWhite]

@@Moroir пропишем условие просто)

[@MikhailKuklenkov]

Благодарю за урок, Дима. componentDidUpdate пушка))

[@Matfei-h2o]

Кайф от того что всё работает, стоит всех тех мучений через которые ты прошёл

[@vladv.198]

Прикольно, методы жизненного цикла REACT componentDidUpdate надо углубиться!

[@orangedragonthebestraper]

Респект - Кто то учит безвозмездно - не ожидая обязательной оплаты - Настоящий учитель!

[@Vllad_Ko]

Полезно использовать componentDidUpdate, только надо помнить про условия выхода, иначе в бесконечный цикл можно въехать

[@seriogaromanchykov9451]

Спасибо за эти бесценные знания!!!! 2023

[@ihorvitaliyovytch7959]

Спасибо, маленькое видео с большой информацией. componentDidUpdate

[@Filin0wl]

74% курса. Только вперёд

[@denkodatskyi3381]

React JS - componentDidUpdate Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)

[@АрсенОсипов-ж6щ]

API, JS, TS,ajax State, Store, Dispatch ,Connect, Action, Route Provider, Reducer, mapStateToProps mapDispatchToProps, {...state}, Props React Redux ,withRouter redux-thunk Redirect Практика, cookie,login follow-unfollow api redux-thunk High Order Component (hoc) setState, local state compose create-react-app http put, local state componentDidUpdate JavaScript курс React DAL, axios.create Веб разработка разметка best of the best!!! Спасибо за урок :)

[@smolhs1586]

не отпускало чувство, что Димыч записывал урок в слезах 😔 я закончила уже 73 урока и чувствую себя гораздо лучше, чем годом ранее, когда только осваивала джаваскрипт, поэтому я вам запрещаю плакать, вы замечательный учитель и человек)

[@ivanmiarkulau8320]

спасибо за знакомство с методом жизненного цикла componentDidUpdate!)

[@alexanderkozlov7416]

componentDidUpdate довольно полезный метод React'a. Димыч лучший! Огромное спасибо тебе за труд.

[@sos_voice_of_nature]

Лучшее объяснение React JS - componentDidUpdate

[@АртемКулинский-ю4о]

Бомблю выпуск за выпуском! Дмитрий очень хорошо все объясняет! Отличный курс по React - Redux! Лучшее, что я видел на просторах интернета! Все понятно, часто забегаю вперед, делаю, потом смотрю как это сделал Дмитрий!

[@bogdansereda7568]

ReactJS, componentDidUpdate, JS. Спасибо Димыч, ты крут. Спасибо за твои труды

[@Димкинкоп]

componentDidUpdate крутой метод, летим дальше!!)))

[@semial]

Димыч, спасибо за урок и все твои труды))) Тема, посвященная componentDidUpdate, разъяснена грамотно и понятно) Очень надеюсь, что получится трудоустроится и продолжить путь в космос, даже если кто-то говорит, что твоем курсе всё "по-детски". Ну, для кого как. Мне конечно многие вещи еще непонятны, но я считаю, что ты несешь огромную пользу людям и открываешь путь в IT мир. Здоровья и счастья тебе!!!)))

[@egorepir]

ну что ж летим дальше вверх только в космос

[@ГеннадийГорохов-ц8н]

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

[@АнтонЧижков-ч4л]

Устроился?

[@ГеннадийГорохов-ц8н]

@@АнтонЧижков-ч4л Да привет в феврале, устроился.

[@alexeygolovanov6150]

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

[@Артем-ч7э9ъ]

Супер! Раньше боялся и не понимал всех этих методов жизненного цикла компонент, а теперь начал врубаться потихоньку, все проясняется)

[@Dozortsev]

Очень нравится как ты объясняешь! Всё просто и понятно про componentDidUpdate!

[@ГалинаКузнецова-н1и]

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

[@alik64]

Как всегда крутой урок и очень хорошая подача материала!🔥🔥🔥🚀 Реакт редакс react redux componentDidUpdate

[@Rapterlol]

Курс по React JS супер. Димыч Лучший!! Очень часто требуют сделать форму входа на сайт. Ты скоро планируешь это реализовать в проекте?

[@ITKAMASUTRA]

Сегодня начнём)

[@marsonleonardovich4036]

componentDidUpdate!!! Всё круто!

[@ГенаФес-ъ9з]

React JS - componentDidUpdate Летим ) Супер уроки - благодарю!

[@АртемийЛукин-г4ы]

Летим !

[@dimitriitkach7697]

spasibo za urok - React JS - componentDidUpdate

[@fazatranz]

react js redux методы жизненного цикла componentDidUpdate супер уроки!

[@ALEKSEY_77737]

летим дальше! componentDidUpdate

[@jonecramer3870]

Жаль что нельзя подписаться дважды((( Спасибо Дим за твой труд и за React Js - componentDidUpdate()

[@MrZorg23]

Спасибо за componentDidUpdate! Старая тема, но повторение не помешает!

[@borisaleksandrovskiy1962]

Спасибо за урок!=) Лучший курс по React + Redux!!!

[@Smash69ful]

Отличный курс по React JS. Я использовал componentDidMount вместо componentDidUpdate. И тоже всё работает.

[@milter2539]

Урок 74. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:

[@user-tf1rn7qq2p]

Большое реактивное спасибо, Димыч! componentDidUpdate

[@mariia6820]

Лучшее практическое объяснение componentDidUpdate ! Димыч,спасибо огромное!!

[@sitenno7331]

ありがとうございました。componentDidUpdate

[@sandorkligan2208]

Спасибо Димыч! Лучший Курс React JS Redux

[@nachalponimat]

Спасибо за рассказ о componentDidUpdate!

[@ЮлияМарченко-э1ж]

Спасибо за твой труд! ты создал лучший курс по react и redux)) componentDidUpdate, методы жизненного цикла

[@СміхГієни]

Я на предыдущем уроке застрял на часов так 6, это кабздец)

[@indigosay]

красава, так и надо

[@ЛусінеАтаджанян]

Я тоже, это норма

[@Артем-ч7э9ъ]

У меня почти каждый урок такая же фигня, думаю это нормально =)

[@СміхГієни]

@@Артем-ч7э9ъ это может быть не ок, если ты начал сразу с реакта, не зная JS и разметки

[@igoralt16]

Надеюсь эти часы работы окупились и ты устроился

[@maksimpl]

Летим! Спасибо Димыч, все понятно!

[@Aleks-lk1et]

Спасибо 2022! Иду дальше.

[@mykhailostepanishchev6472]

как всегда очень интересно и позновательно,спасибо ! componentDidUpdate

[@zak_47]

Курс по React JS супер. Все круто! Задоначу с первого же проекта)!

[@ivansedakov6823]

Боже, я день возился с этим, потому что не мог обновить profilepage при смене url... Мог просто почитать документацию DidUpdate или посмотреть Димыча, ахах) Спасибо!

[@Elvolvers]

Такая же фигня, хоть я и прочитал заранее про DidUpdate, но зациклился при обновлении URL

[@dxnght]

Очень лаконично, круто и супер понятно! Бомбим!!!

[@alexanonymous5823]

componentDidUpdate класс!!!! спасибо!!!!!

[@mrchyt8861]

componentDidUpdate бомбим)

[@БорисЦ-ю8ы]

REACT componentDidUpdate, методы жизненного цикла, всё круто!

[@ОлександрОпенько-ь6м]

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

[@johnmj750]

Спасибо, Димыч!!! Дай тебе Бог здоровья!!!

[@sergeyistominov5880]

Плюсик для лучшего ранжирования! =)

[@Багвматрицегребанойреальности]

Хороший урок по componentDidUpdate

[@araikrasoyan702]

Спасибо, Димыч, очень интересно всё!

[@ХаджимуратОмаров-т1с]

Важнгейшая тема! Димыч - спасибо за простое и доступное объяснение! Как всегда на высоте😘

[@bystryisokol1546]

классный трик. Димыч лучший. Как всегда Like )))

[@dzmitryaliashkevich6664]

2022 январь, Крутой курс!

[@ЭддиД]

React JS componentDidUpdate Спасибо за уроки

[@dechto1]

Спасибо. Круто. Жаль что так мало в этом курсе осталось. Придется пересматривать.

[@dimaruy2975]

React JS - componentDidUpdate это круто

[@АлексГ-п3ж]

Спасибо! P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно, componentDidUpdate

[@andriioliinykyout]

Спасибо, Димыч, скоро досматриваю и буду трудоустраиваться!

[@Brinzovik]

React JS - componentDidUpdate js полезно понятно

[@otto-vector]

componentDidUpdate подробно. Бесплатный курс по React. Смотреть.

[@andreiribac6284]

04,08,2021 Спасибо за твой труд Димыч!

[@AY-rf3ku]

Спасибо за видео!:) React constructor ComponentDidMount componentDidUpdate

[@amaxe12345]

Димыч, спасибо за урок! React JS - componentDidUpdate #componentDidUpdate #reactjs

[@tema_skakun]

Димыч, в описании под видео есть опечатка, видно, что писал в запаре. Написано componentDidMount, а должно быть написано componentDidUpdate. вот исправленный текст для описания: Компонент монтируется один раз. А потом, когда в нём меняется локальный стейт либо кто-то извне хочет перерисовать компонент и закинуть в него новые пропсы, => срабатывает метод жизненного цикла componentDidUpdate. Важный момент: этот метод срабатывает уже после отрисовки, то есть находясь в нём мы имеем актуальные самые свежие this.state и this.props. Для того, чтобы у нас была возможность находясь в этом месте проанализировать, а что именно изменилось (пропсы или стейт), React забрасывает в метод componentDidUpdate предыдущие пропсы и стейт (prevProps и prevState). В данном методе жизненного цикла разрешено вызывать setState, но так как это может привести к зацикленности, делать это нужно аккуратно и всегда внутри правильного условия! спасибо за выпуск, мчим дальше)

[@АлексейБеляев-к3к]

Спасибо за твой труд, React Redux lifecycle methods. ComponentDidUpdate

[@ole_oli]

awesome lessons. Thanks for best content. componentDidUpdate!!!

[@ritaravinsky8262]

Спасибо огромное! Очень доступно и понятно!

[@spacerider9426]

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

[@mrs.doubtfire8197]

Это первое видео, которое мне пришлось аж 3 раза смотреть, и то я не уверена, что в итоге правильно всё поняла

[@ЖеняЗычков-з1т]

странно, в этом видео ведь вообще ничего сложного не было

[@ctumyji9737]

Спасибо за урок! Было познавательно - летим дальше! React JS - лучший курс!

[@aymkin]

Афигеть, я сегодня получил джобофер. На собесе рассказывал преимущественно то, что получил из видосов у Димыча! Почему я не встретил тебя полгода назад???

[@ITKAMASUTRA]

Ахаха) бро, ты реактивный какой-то)) рад твоим успехам)) летите космос! Удачи на рабочем месте!!! Супер!

[@aymkin]

@@ITKAMASUTRA так что обещание задонатить с первой зарплаты становится реальностью)

[@Илья-у3г1с]

@@aymkin как успехи?

[@indigosay]

сколько зп?)

[@aymkin]

@@indigosay за год подняли в три раза

[@resenpaii]

Каеф))) Было суперактульно. Многие проблемы решит.

[@ДенисВладимирович-ы2ъ]

Летим componentDidUpdate

[@DagestanShop]

как раз не раз эта ошибка вылазила max depth exeeded , спасибо за инфу !

[@alejandrodsj]

Круто!!! componentDidUpdate

[@denweb2408]

Спасибо за уроки!) Очень круто

[@fargutvest]

componentDidUpdate(previousProps, previousState) - вызывается если изменились либо props либо state Круто, Спасибо! React Redux

[@ИльяШумилов-к4ж]

В самом начале видео примерно с 45ой секунды Димыч описывает проблему последовательности получения Profile и Status: если первый приходит Status, то все ок, а если первый приходит Profile - то не ок. Мне не понятно одно. Ведь и this.props.getStatus(userId) и this.props.getUserProfile(userId) меняют глобальный state и по идее после каждой смены стейта та часть дерева, которая связана с этими изменениями должна была и так перерисоваться без использования componentDidUpdate. Или тут это как-то с асинхронностью связано?

[@Mikhail-v3b]

смотрю уроки только сейчас, спустя 4 года от их выхода! Некоторые вещи приходиться переделывать читая документацию на новый лад, но уроки все равно супер! Хотел проплатить подписку, но к сожалению не даёт платежная система юмоней, писал в поддержку, сказали что сам пользователь ограничил или что то вроде того(

[@TRIZ-Bogatyregold]

Когда уже знаешь как это работает на хуках, то все эти жизненные циклы типа componentDidUpdate и прочии - очень тяжело заходят!!! Спасибо Димыч за подробные объяснения, летим дальше!

[@interpol2138]

Тогда похоже плохо знаком с хуками) useEffect представляет собой совокупность методов componentDidMount, componentDidUpdate, и componentWillUnmount.