Три раза пересмотрел, чтобы понять, какого чёрта тут происходит. Короч, объясняю, как я понял. Смотрите, когда мы обновляем страницу, происходит два телодвижения: this.props.getUserProfile(userId) и this.props.getStatus(userId). Каждый из этих запросов ждет ответа от сервера. Если профиль приходить БЫСТРЕЕ чем статус, то рендер происходит с ОДНИМ НЮАНСОМ - так как сервер нам ещё не прислал ответ со статусом, то в ЛОКАЛЬНЫЙ стейт записывается ПУСТОЙ статус, потому что он у нас в глобальном стейте тоже пустой. Затем, когда уже от сервера приходит ответ со статусом, то происходит новый рендер, где мы видим статус на странице, так как он записался в глобальный стейт и соответственно есть в глобальных пропсах, НО статус в ЛОКАЛЬНОМ стейте НЕ МЕНЯЕТСЯ и остается ПУСТЫМ. В итоге при даблклике в инпуте будет пустота. Тут самое главное понять, что рендер происходит молниеносно. Мы не видим первый рендер с пустым статусом, а видим только итог второго, когда статус уже пришёл и отображается на странице, но не в импуте. Так как локальный стейт уже сформировался с пустым статусом в первом рендере, то во втором рендере статус туда уже не запишется и поэтому будет пустой инпут. Для этого нам и нужен componentDidUpdate, который всегда вызывается при каждом новом рендере. Когда у нас происходит второй рендер, мы сверяем старые пропсы в локальном стейте с новыми пропсами из глобального. Если они различаются, то с помощью setState изменяем пустой статус в пропсах локального стейта на новый статус, который пришел в новых пропсах. Надеюсь, я всё правильно понял, поправьте, если что-то не так. Лайкосик, если помог.)
Отличное обьяснение, но остается один вопрос - почему статус в локальном стейте не меняется когда меняется глобальный? он ведь инициализируется как state: this.props.state, а значит должен меняться когда меняется глобальный стэйт.
@@Max-xj7dw Потому что локальный стейт инициализируется при первом рендере и дальше живет своей жизнью. Да, после того, как пришел статус, происходит новый рендер, но локальный стейт остается тем же, он не обновляет данные и сохраняет значение, которые были ему переданы при первом рендере. Для этого нам надо дать указание, при каких условиях он должен обновить данные в локальном стейте, поэтому мы и вводим метод componentDidUpdate где вручную сравниваем старые данные локального стейта с новыми пропсами и если они отличаются, то обновляем локальный стейт.
Если кто то столкнется с тем, что в конце видоса у вас статус не сохраняется после обновления страницы браузера, в файле ProfileContainer не забудьте в userId указать именно ваш ID, который указан в профиле на сайте social-network
Кстати кто заметил или нет, но каждый кто зарегался в API становиться частью соц сети, поэтому делаем вывод , что все люди в этой АПишке живые. И все что вы пишете в статусе увидят те кто придут после вас, поэтому вы можете оставлять послания в своих статусах для следующего поколения так сказать :D
Супер видос про componentDidUpdate !!! Чтобы не писать постояно console.log() - можно написать любое выражение которое хочешь вывести в консоль и в конце написать .log , тебе высветит выбрать console.log, выбираешь и у тебя всё автоматом оборачивается в console.log, очень удобно )) Лучшие уроки в 2019 году по React.js и Redux
Огромное человеческое спасибо! Стараемся тебя поддержать, каждый по мере возможностей! Димыч - ты меняешь судьбы людей! Благодарность безграничная тебе - от всей души!
2024-06-02 уже лето, второе лето я изучаю #react. раньше изучала самостоятельно, сейчас изучаю вместе с #itincubator. уже 74 выпуск, четверг, знаний прибавляется, относительно нуля так вообще сдвинулось дело =) буду продолжать двигаться вперед. Дмитрий и комнда, спасибо за мотивацию и поддержку!
Боже, я день возился с этим, потому что не мог обновить profilepage при смене url... Мог просто почитать документацию DidUpdate или посмотреть Димыча, ахах) Спасибо!
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!!! Спасибо за урок :)
Димыч, спасибо за урок и все твои труды))) Тема, посвященная componentDidUpdate, разъяснена грамотно и понятно) Очень надеюсь, что получится трудоустроится и продолжить путь в космос, даже если кто-то говорит, что твоем курсе всё "по-детски". Ну, для кого как. Мне конечно многие вещи еще непонятны, но я считаю, что ты несешь огромную пользу людям и открываешь путь в IT мир. Здоровья и счастья тебе!!!)))
не отпускало чувство, что Димыч записывал урок в слезах 😔 я закончила уже 73 урока и чувствую себя гораздо лучше, чем годом ранее, когда только осваивала джаваскрипт, поэтому я вам запрещаю плакать, вы замечательный учитель и человек)
Бомблю выпуск за выпуском! Дмитрий очень хорошо все объясняет! Отличный курс по React - Redux! Лучшее, что я видел на просторах интернета! Все понятно, часто забегаю вперед, делаю, потом смотрю как это сделал Дмитрий!
React JS - componentDidUpdate Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)
спасибо что подсказал как правильно сделать проверку в componentDidUpdate. у меня все свойства менялись после каждого перерисовывания компоненты и не получалось правильно сделать проверку. но я вспомнил что у тебя на канале есть видос, который мне сейчас помог.
В самом начале видео примерно с 45ой секунды Димыч описывает проблему последовательности получения Profile и Status: если первый приходит Status, то все ок, а если первый приходит Profile - то не ок. Мне не понятно одно. Ведь и this.props.getStatus(userId) и this.props.getUserProfile(userId) меняют глобальный state и по идее после каждой смены стейта та часть дерева, которая связана с этими изменениями должна была и так перерисоваться без использования componentDidUpdate. Или тут это как-то с асинхронностью связано?
Привет! У меня такой же код как у Димы, но почему-то все правильно работает и без componentDidUpdate. Если добавить componentDidUpdate как у Димы, то тоже все работает, то есть статус не пропадает никуда при ее редактировании. Не знаешь почему так?😅
Когда уже знаешь как это работает на хуках, то все эти жизненные циклы типа componentDidUpdate и прочии - очень тяжело заходят!!! Спасибо Димыч за подробные объяснения, летим дальше!
Человек ракета, буквально, прям шило в попе) и таких людей очень не хватает. То, что у нас статус теперь в 4 местах - локальный и глобальный стейт, текущие и предыдущие пропсы - реально путает, сидел минут сорок подбирал что с чем равнять PS: Машинально пробую отредачить коммент на ютуб дабл кликом
Димыч, в описании под видео есть опечатка, видно, что писал в запаре. Написано componentDidMount, а должно быть написано componentDidUpdate. вот исправленный текст для описания: Компонент монтируется один раз. А потом, когда в нём меняется локальный стейт либо кто-то извне хочет перерисовать компонент и закинуть в него новые пропсы, => срабатывает метод жизненного цикла componentDidUpdate. Важный момент: этот метод срабатывает уже после отрисовки, то есть находясь в нём мы имеем актуальные самые свежие this.state и this.props. Для того, чтобы у нас была возможность находясь в этом месте проанализировать, а что именно изменилось (пропсы или стейт), React забрасывает в метод componentDidUpdate предыдущие пропсы и стейт (prevProps и prevState). В данном методе жизненного цикла разрешено вызывать setState, но так как это может привести к зацикленности, делать это нужно аккуратно и всегда внутри правильного условия! спасибо за выпуск, мчим дальше)
Три раза пересмотрел, чтобы понять, какого чёрта тут происходит. Короч, объясняю, как я понял.
Смотрите, когда мы обновляем страницу, происходит два телодвижения: this.props.getUserProfile(userId) и this.props.getStatus(userId). Каждый из этих запросов ждет ответа от сервера.
Если профиль приходить БЫСТРЕЕ чем статус, то рендер происходит с ОДНИМ НЮАНСОМ - так как сервер нам ещё не прислал ответ со статусом, то в ЛОКАЛЬНЫЙ стейт записывается ПУСТОЙ статус, потому что он у нас в глобальном стейте тоже пустой.
Затем, когда уже от сервера приходит ответ со статусом, то происходит новый рендер, где мы видим статус на странице, так как он записался в глобальный стейт и соответственно есть в глобальных пропсах, НО статус в ЛОКАЛЬНОМ стейте НЕ МЕНЯЕТСЯ и остается ПУСТЫМ. В итоге при даблклике в инпуте будет пустота.
Тут самое главное понять, что рендер происходит молниеносно. Мы не видим первый рендер с пустым статусом, а видим только итог второго, когда статус уже пришёл и отображается на странице, но не в импуте. Так как локальный стейт уже сформировался с пустым статусом в первом рендере, то во втором рендере статус туда уже не запишется и поэтому будет пустой инпут.
Для этого нам и нужен componentDidUpdate, который всегда вызывается при каждом новом рендере. Когда у нас происходит второй рендер, мы сверяем старые пропсы в локальном стейте с новыми пропсами из глобального. Если они различаются, то с помощью setState изменяем пустой статус в пропсах локального стейта на новый статус, который пришел в новых пропсах.
Надеюсь, я всё правильно понял, поправьте, если что-то не так.
Лайкосик, если помог.)
да, если поставить debugger в componentDidUpdate, обновить страницу, то можно увидить, как меняются пропсы.
вникнул сам за 40 мин, потом прочитал твой коммент, убедился что правильно все понял спс)
От души, разобрался с помощью твоего сообщения! =)
Отличное обьяснение, но остается один вопрос - почему статус в локальном стейте не меняется когда меняется глобальный? он ведь инициализируется как state: this.props.state, а значит должен меняться когда меняется глобальный стэйт.
@@Max-xj7dw Потому что локальный стейт инициализируется при первом рендере и дальше живет своей жизнью. Да, после того, как пришел статус, происходит новый рендер, но локальный стейт остается тем же, он не обновляет данные и сохраняет значение, которые были ему переданы при первом рендере. Для этого нам надо дать указание, при каких условиях он должен обновить данные в локальном стейте, поэтому мы и вводим метод componentDidUpdate где вручную сравниваем старые данные локального стейта с новыми пропсами и если они отличаются, то обновляем локальный стейт.
Как представлю, сколько времени нужно было потратить на этот курс , записывая видео... Спасибо за эти бесценные знания!!!!
Если кто то столкнется с тем, что в конце видоса у вас статус не сохраняется после обновления страницы браузера, в файле ProfileContainer не забудьте в userId указать именно ваш ID, который указан в профиле на сайте social-network
Огромное спасибо!!!
заработало)
Большое спасибо, мужик!!!
человечище!!!! спасибо!!
Кстати кто заметил или нет, но каждый кто зарегался в API становиться частью соц сети, поэтому делаем вывод , что все люди в этой АПишке живые.
И все что вы пишете в статусе увидят те кто придут после вас, поэтому вы можете оставлять послания в своих статусах для следующего поколения так сказать :D
Супер видос про componentDidUpdate !!! Чтобы не писать постояно console.log() - можно написать любое выражение которое хочешь вывести в консоль и в конце написать .log , тебе высветит выбрать console.log, выбираешь и у тебя всё автоматом оборачивается в console.log, очень удобно )) Лучшие уроки в 2019 году по React.js и Redux
Хм.. фига себе... проверю!
xxx.log и потом сразу Tab нажать и всё, превращается в console.log(xxx); Круто! Возможности Шторма неисчерпаемы )
в вск по-дефолту можно написать лог, потом пробел, потом вписывать то, что надо отобразить
В атоме пишем просто букву l (или слово log), затем Tab и мы попадаем сразу внутрь консоль лога, тоже удобно
а я вообще с помощью мысли код печатаю
У тебя ох****ая физиономия! Сразу настроение поднимает. Отличный урок
Ахах) ну круто! Летим!
Огромное человеческое спасибо!
Стараемся тебя поддержать, каждый по мере возможностей!
Димыч - ты меняешь судьбы людей! Благодарность безграничная тебе - от всей души!
2024-06-02 уже лето, второе лето я изучаю #react. раньше изучала самостоятельно, сейчас изучаю вместе с #itincubator. уже 74 выпуск, четверг, знаний прибавляется, относительно нуля так вообще сдвинулось дело =) буду продолжать двигаться вперед. Дмитрий и комнда, спасибо за мотивацию и поддержку!
Успехов! Победа ближе, чем кажется!🤝
Моя третья попытка пройти курс наконец поставила исторический рекорд, здесь я еще не был не когда.Бомбим дальше...
тоже третья попытка, но предыдущий рекорд был уроке на 40-м где то)
@@keepworking2705 Давай, давай, я уже fullstack разработчиком стал))
Відчуваю - скоро знайду роботу реакт розробником) вже пальці сверблять ) Дякую Дімич за чудовий курс!
і як, закінчили курс?)
Респект - Кто то учит безвозмездно - не ожидая обязательной оплаты - Настоящий учитель!
Каждый видос - плюс один год жизни и минус один градус в аду
Супер настрой!! Летим!!!!
С минус один градус важно вовремя остановиться, а то можно Хельхейм устроить)
@@Moroir пропишем условие просто)
Прикольно, методы жизненного цикла REACT componentDidUpdate надо углубиться!
Спасибо за эти бесценные знания!!!! 2023
Спасибо тебе за урок и за твой позитив! Ты заряжаешь не бросить этот тернистый путь маленького самурайчика! :)
Полезно использовать componentDidUpdate, только надо помнить про условия выхода, иначе в бесконечный цикл можно въехать
Спасибо большое за урок!!! React JS - componentDidUpdate супер
Боже, я день возился с этим, потому что не мог обновить profilepage при смене url... Мог просто почитать документацию DidUpdate или посмотреть Димыча, ахах)
Спасибо!
Такая же фигня, хоть я и прочитал заранее про DidUpdate, но зациклился при обновлении URL
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!!!
Спасибо за урок :)
Спасибо, маленькое видео с большой информацией. componentDidUpdate
Димыч, спасибо за урок и все твои труды)))
Тема, посвященная componentDidUpdate, разъяснена грамотно и понятно)
Очень надеюсь, что получится трудоустроится и продолжить путь в космос, даже если кто-то говорит, что твоем курсе всё "по-детски". Ну, для кого как. Мне конечно многие вещи еще непонятны, но я считаю, что ты несешь огромную пользу людям и открываешь путь в IT мир. Здоровья и счастья тебе!!!)))
не отпускало чувство, что Димыч записывал урок в слезах 😔 я закончила уже 73 урока и чувствую себя гораздо лучше, чем годом ранее, когда только осваивала джаваскрипт, поэтому я вам запрещаю плакать, вы замечательный учитель и человек)
Лучшее объяснение React JS - componentDidUpdate
Димыч, спасибо тебе за крутые уроки!
Благодарю за урок, Дима. componentDidUpdate пушка))
Бомблю выпуск за выпуском! Дмитрий очень хорошо все объясняет! Отличный курс по React - Redux! Лучшее, что я видел на просторах интернета! Все понятно, часто забегаю вперед, делаю, потом смотрю как это сделал Дмитрий!
спасибо за знакомство с методом жизненного цикла componentDidUpdate!)
Очень нравится как ты объясняешь! Всё просто и понятно про componentDidUpdate!
Кайф от того что всё работает, стоит всех тех мучений через которые ты прошёл
74% курса. Только вперёд
React JS - componentDidUpdate
Лучшие уроки по React JS & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just simply about information technology =)
componentDidUpdate довольно полезный метод React'a. Димыч лучший! Огромное спасибо тебе за труд.
классный трик. Димыч лучший. Как всегда Like )))
Я на предыдущем уроке застрял на часов так 6, это кабздец)
красава, так и надо
Я тоже, это норма
У меня почти каждый урок такая же фигня, думаю это нормально =)
@@Артем-ч7э9ъ это может быть не ок, если ты начал сразу с реакта, не зная JS и разметки
Надеюсь эти часы работы окупились и ты устроился
ReactJS, componentDidUpdate, JS. Спасибо Димыч, ты крут. Спасибо за твои труды
componentDidUpdate крутой метод, летим дальше!!)))
react js redux методы жизненного цикла componentDidUpdate супер уроки!
Спасибо за componentDidUpdate! Старая тема, но повторение не помешает!
Жаль что нельзя подписаться дважды((( Спасибо Дим за твой труд и за React Js - componentDidUpdate()
Спасибо огромное за твой вклад в наше образование и становление программистами!!!Димыч, как всегда на высоте
Сегодня 29.11.21.г. Сегодня урок был очень полезный продолжаю учиться всё супер!
Устроился?
@@АнтонЧижков-ч4л Да привет в феврале, устроился.
Супер! Раньше боялся и не понимал всех этих методов жизненного цикла компонент, а теперь начал врубаться потихоньку, все проясняется)
Курс по React JS супер. Димыч Лучший!!
Очень часто требуют сделать форму входа на сайт. Ты скоро планируешь это реализовать в проекте?
Сегодня начнём)
Как всегда крутой урок и очень хорошая подача материала!🔥🔥🔥🚀 Реакт редакс react redux componentDidUpdate
Лучшее практическое объяснение componentDidUpdate ! Димыч,спасибо огромное!!
componentDidUpdate!!! Всё круто!
React JS - componentDidUpdate Летим )
Супер уроки - благодарю!
Спасибо Димыч! Лучший Курс React JS Redux
Отличный курс по React JS. Я использовал componentDidMount вместо componentDidUpdate. И тоже всё работает.
Летим! Спасибо Димыч, все понятно!
Курс по React JS супер. Все круто! Задоначу с первого же проекта)!
spasibo za urok - React JS - componentDidUpdate
Спасибо за урок!=) Лучший курс по React + Redux!!!
Летим !
componentDidUpdate класс!!!! спасибо!!!!!
ну что ж летим дальше вверх только в космос
componentDidUpdate бомбим)
ありがとうございました。componentDidUpdate
спасибо что подсказал как правильно сделать проверку в componentDidUpdate. у меня все свойства менялись после каждого перерисовывания компоненты и не получалось правильно сделать проверку. но я вспомнил что у тебя на канале есть видос, который мне сейчас помог.
Спасибо за твой труд! ты создал лучший курс по react и redux)) componentDidUpdate, методы жизненного цикла
React JS
componentDidUpdate
Спасибо за уроки
летим дальше! componentDidUpdate
Очень лаконично, круто и супер понятно! Бомбим!!!
Спасибо, Димыч, очень интересно всё!
Урок 74. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
Спасибо за рассказ о componentDidUpdate!
Важнгейшая тема! Димыч - спасибо за простое и доступное объяснение! Как всегда на высоте😘
В самом начале видео примерно с 45ой секунды Димыч описывает проблему последовательности получения Profile и Status: если первый приходит Status, то все ок, а если первый приходит Profile - то не ок. Мне не понятно одно. Ведь и this.props.getStatus(userId) и this.props.getUserProfile(userId) меняют глобальный state и по идее после каждой смены стейта та часть дерева, которая связана с этими изменениями должна была и так перерисоваться без использования componentDidUpdate. Или тут это как-то с асинхронностью связано?
Хороший урок по componentDidUpdate
Большое реактивное спасибо, Димыч! componentDidUpdate
Спасибо, Димыч!!! Дай тебе Бог здоровья!!!
Димыч, спасибо за урок! React JS - componentDidUpdate #componentDidUpdate #reactjs
React JS - componentDidUpdate js полезно понятно
React JS - componentDidUpdate это круто
Это первое видео, которое мне пришлось аж 3 раза смотреть, и то я не уверена, что в итоге правильно всё поняла
странно, в этом видео ведь вообще ничего сложного не было
Спасибо!
P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно,
componentDidUpdate
как всегда очень интересно и позновательно,спасибо ! componentDidUpdate
REACT componentDidUpdate, методы жизненного цикла, всё круто!
Спасибо. Круто. Жаль что так мало в этом курсе осталось. Придется пересматривать.
Спасибо за урок! Было познавательно - летим дальше!
React JS - лучший курс!
Плюсик для лучшего ранжирования! =)
useEffect, спасибо что ты есть)
Привет! У меня такой же код как у Димы, но почему-то все правильно работает и без componentDidUpdate. Если добавить componentDidUpdate как у Димы, то тоже все работает, то есть статус не пропадает никуда при ее редактировании. Не знаешь почему так?😅
Спасибо огромное за твой труд! Смотрю дальше!
Когда уже знаешь как это работает на хуках, то все эти жизненные циклы типа componentDidUpdate и прочии - очень тяжело заходят!!! Спасибо Димыч за подробные объяснения, летим дальше!
Тогда похоже плохо знаком с хуками) useEffect представляет собой совокупность методов componentDidMount, componentDidUpdate, и componentWillUnmount.
Человек ракета, буквально, прям шило в попе) и таких людей очень не хватает. То, что у нас статус теперь в 4 местах - локальный и глобальный стейт, текущие и предыдущие пропсы - реально путает, сидел минут сорок подбирал что с чем равнять
PS: Машинально пробую отредачить коммент на ютуб дабл кликом
Спасибо огромное!
Очень доступно и понятно!
как раз не раз эта ошибка вылазила max depth exeeded , спасибо за инфу !
componentDidUpdate(previousProps, previousState) - вызывается если изменились либо props либо state
Круто, Спасибо!
React Redux
awesome lessons. Thanks for best content. componentDidUpdate!!!
Спасибо, Димыч, скоро досматриваю и буду трудоустраиваться!
Спасибо за уроки!) Очень круто
Каеф))) Было суперактульно. Многие проблемы решит.
Спасибо за видео!
Димыч, в описании под видео есть опечатка, видно, что писал в запаре. Написано componentDidMount, а должно быть написано componentDidUpdate.
вот исправленный текст для описания:
Компонент монтируется один раз. А потом, когда в нём меняется локальный стейт либо кто-то извне хочет перерисовать компонент и закинуть в него новые пропсы, => срабатывает метод жизненного цикла componentDidUpdate.
Важный момент: этот метод срабатывает уже после отрисовки, то есть находясь в нём мы имеем актуальные самые свежие this.state и this.props. Для того, чтобы у нас была возможность находясь в этом месте проанализировать, а что именно изменилось (пропсы или стейт), React забрасывает в метод componentDidUpdate предыдущие пропсы и стейт (prevProps и prevState).
В данном методе жизненного цикла разрешено вызывать setState, но так как это может привести к зацикленности, делать это нужно аккуратно и всегда внутри правильного условия!
спасибо за выпуск, мчим дальше)
Круто!!! componentDidUpdate
Спасибо 2022! Иду дальше.
Летим componentDidUpdate
Еееее ,я все понимаю ,это удивительно,может я себя реально недооцениваю!?
04,08,2021 Спасибо за твой труд Димыч!
Красавец Димыч, шлю донаты
Что ж лайков то так мало! Димыч, спасибо! React, redux, setState, componentDidUpdate, componentDidMount