Что мы можем сказать исходя из этого видео? То, что Archakov красавчик.

Изначально поставленная проблема в первом примере - счётчик 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 эту функцию вычеслений с зависимостью этих двух пропсов и в таком случае, если мы снаружи поменяем тему, то вычесление не будет произведено, а мы просто отобразим значение из кеша с новой темой. В общем и целом вы показали как работает мемоизация в реакте, но не когда её применять, как и зачем. Изначальный код был хорошим для того, чтобы показать как делать рефакторинг, разделять логику на компоненты и объяснить почему если компонент может хранить свой стейт, то следует его поместить именно в компонент. В итоге вместо этого плохой код стал еще хуже, потому что при рефакторинге придется убирать мемоизацию и начинать с нормального разделения на компоненты. Вторую часть не буду расписывать, потому что все проблемы оттуда же, что я уже написал и они бы тоже были решены нормальным разделением на компоненты. Если бы мемоизация была бесплатной, то можно было бы хоть везде и всё мемоизировать, но это не так и нужно понимать когда это даст оптимизацию, а когда может наоборот ухудшить производидельность. Не только количество рендеров влияет на производительность

Чисто человеческое Спасибо тебе, настолько прекрасно объяснил всё прям по полочкам разложил, по сути все делают такие видео, но настолько глубоко и в чистом виде не делает ни кто, так что Удачи тебе и Рад всем твоим новым подачам Инфы)))))

Этот канал- находка для меня! Спасибо за труды🤗

Настолько понятно объяснить нужно иметь талант. Спасибо!!

Шикарное объяснение, большое вам спасибо

Оромное спасибо!, подача информации настолько понятная и прозрачна, с актуальными и граматными примерами!, Респект!

Очень понятно и доступно объяснили! Перешел на выше видео,так как у другого блогера вообще не понял что к чему и куда, с вашей помощью все встало на полочки

Я ждал продолжение реакт хуков уже 10000 лет!

Самое лучшее объяснение useMemo 🔥

Классная инфа,спасибо Archakov)

спасибо большое за материал!!! все доходчиво и наглядно объяснил.

Я дождался! Спасибо! Жду про юз колбэк)

Шикарно объяснил! Кратко, наглядно. Лайк

Отличное пояснение, спасибо огромное за труд. Желаю что бы старания автора окупились во много раз)

спасибо! писал в телеге и пповтрю тут - по части хуков у тебя самые толковые видео в русском тытубе

Блин, как же понятно, Антон, спасибо тебе огромнейшееееее!!!

Прекрасное объяснение!!! Благодарствую!!

Просто лайк авансом ставлю!

Лайки не забываем ставить, отличные видео! все четко и понятно.

Спасибо, это было реально очень полезно.

Спасибо за наглядные примеры!

Чувак СПАСИБО!!!! Я ЖДАЛ! ААААААААААААА

Спасибо тебе добрый человек! Теперь стало понятно)😀

Блин, так доходчиво объясняешь! Даешь гайды на все хуки!

О, огонь, лайк вперёд! З наступающим!

Еще один божественный лайк божественному видео

Спасибо , крутая подача материала

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

Спасибо, очень доступно объяснил. Лайк поставил, коммент для продвижения написал, подписку оформил. Успехов!

кайфффф!! очень подробное объяснение

Спасибо. Положу себе под ёлку.

Лайк не глядя

очень качественно и доходчиво!

Огонь видео!!!

@Archakov Blog, всплывающие названия материала в иконке посередине на милисекенду замечательны! Усваивается лучше материал от того, что мозг удивлен подачей мощнейшей (React.memo, React.useMemo)

Красавец, шикарный пример!

спасибо, все очень доходчиво !

Хорошее видео по useMemo и React.memo

Хорошее объяснение, спасибо

Супер видео, спасибо

Топ!!! Объяснил как родному сыну!

Благодарю за видео

Лайк не глядя)

Раскидал именно все по полочкам)

отличное объяснение , спасибо !

Годно!

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

Спасибо,Разобрался.Лайк

спасибо за труд!

очень мегахорош, лайк!

Чел, ты объясняешь реально очень хорошо, доходчиво, и примеры идеальные! Где продолжения??

крутое обьяснение, спасибо

спасибо лучшее обьяснение

Обнови железо! Ничего зависать не будет. Шучу хороший видосик, спасибо!

Царек. Уважаю!

Супер видео

Полезно!

отличное видео

Спасо за видео🍕🍕👨‍💻👨‍💻

спасибо больщое вам!

вот он настоящий контент для миддлов

Спасибо!

Пушка!

Лучший!!!

Благодарю!

Класс!

есть ошибка, 6 !== 5 хотя isFive будет говорить обратное после написания "shoulComponentUpdate" надо вот так =) (prev, next) => !(prev === 5 || next === 5)

Спасибо! 👍👍👍

Благодарю

спасибо!

Спасибо

Классно

Чуть недокрутил, чтобы "Это пять!" показывалось только если счетчик === 5. Надо бы "if (prevProps.value === 5 || nextProps.value === 5) { return false }"

круто сделай и на класовых компонентах

Отличное видео. Хотел бы уточнить, получается что в компоненте isFive, после добавления React.memo мы можем избавиться от хука useMemo внутри компонента(который присваивали к getResult)?

Отличное видео, но есть такой резонный вопрос: почему тогда не стоит все подряд оборачивать в useMemo и Memo, и если в самом деле не стоит то почему?

🔥🔥🔥🔥🔥🔥🔥

Ну красавец, больше нечего сказать.. Раздербанил, разжувал ив рот положил :)

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

Спасибо. Про React.memo вообще отлично рассказал. Но почему не рассказал почему все компонтенты/функции не оборачивать.

Удивительно сколько костылей в реакте. Зачем он вообще нужен. А за видос спасибо!

Почему я не узнал об Арчакове раньше??????????????????????)

Так получается что useMemo в компоненте isFive уже не нужен, так как проверка пропсов выполняется раньше с помощью memo

А как перерендерить IsFive, если счетчик, например, равен 6?

8:55 возвращает результат выполнения функции, которую указали в пером фекаргументе, А юзЭффект так не делает?

Если в IsFive убрать useMemo но оставить React.memo то ничего не меняется в результате, получается что при использовании React.memo в конкретном данном примере useMemo становится бесполезен ?

Всем привет! Кто знает, почему счетчик в варнинге увеличивается на +2, а не на +1 как у автора? т.е. был 0 при инициализации, потом в варнинге он становится 1, а при перерендере до следующего варнинга, если законсолить пишет уже 2) соответственно в варнинге выводится уже 3) никак не могу понять почему так происходит)

Спасибо тебе, добрый человек, за вторую функцию в React.memo! Мне только одно не понятно - почему все другие это скрывают?

React.memo со своим условием проверки это хорошо, вот только компонент IsFive не меняется обратно после того, как мы перевалили за 5, при 18 он так же будет показывать "Это пять" ))) Что можно сделать в этой ситуации?

Попробовал отследить ререндеры в проекте пицца. К примеру в компоненте ререндер происходит один раз при обновлении страницы и далее по два раза каждое нажатие на категорию, т.е был 1, стал 3, далее, 5 (при выборе категории)... Компонент рендерится аж 19 раз при обновлении страницы, но сам console.warn выскакивает 10 раз. Если же выбрать категорию, то будет 11 console.warn'ов и значение переменной renderCount будет равно 41. Возможно, я что-то не так делаю, но все по аналогии. Хотелось бы понять, почему так? Весь курс пиццы переписан 1 в 1.

Возможно глупый вопрос, но как лучше совместить с Redux?

Арчаков, а где курсы?

Можете пожалуйста сказать почему все функции из коробки не попадают в React.memo(). Мне кажется, так было бы меньше перерисовок. Или может это как-то можно включить в настройках?

Тэээк... Я тут непонял - с чем мы изначально боремся? Почему тяжёлая функция из нижнего счётчика вообще выполняется, когда мы нажимаем верхний счётчик? Потому-что оба счётчика в одном компоненте и всё целиком каждый раз перерендеривается - так что-ли?

Сенк

У меня почему то при каждом рендере счетчик (в консоли который смотрим) аккурат на 2 увеличивается) че за хрень может быть? код с гитхаба скачал

просто о сложном

Вопрос , а нужен ли уже там useMemo внутри если мы обернули всю компоненту в memo ?

В последнем примере же нет смысла в useMemo, т.к. у нас React.memo применяется.