Все ли вы знаете о React key?

[@ArchakovBlog]

Ну чувак, ты крут! Жирный лукос за такой крутой контент 👍

[@it-sin9k]

Спасибо! лайк и репост - это самое приятное для нас))

[@ShoTHIk]

Арчакову лайк за наводку, Синяку лайк за подробнейшее объяснение в видео! :)

[@ЭзизК]

@@ShoTHIk 😁

[@ineptDev]

Странно что по домашке никто не ответил) Буду спойлерить тогда, а ещё и не правильно могу ответить, так что не кидайте камни) 4 WillUnmount 3 DidMount Компоненты обратные стали для всех последующих после Дмитрия. Ключи уже не играют роль, так как по Reconciliation типы другие. Всё. P.S. если что, я не тестил. Так, догадки...))

[@dmitriystoyanov933]

Твой канал и мотивирует и демотивирует одновременно;) уже год работаю, пишу на реакте, кажется что многое знаю, но после абсолютно каждого твоего видоса понимаю, что нихрена не знаю;))

[@it-sin9k]

Я уже 10 лет так страдаю))) Вот сейчас для нового ролика сделал исследование про reselect. Открылся он мне вообще с новой стороны)

[@dmitriystoyanov933]

@@it-sin9kаж смотреть боязно;)

[@viktorsoroka4510]

Правильно ответил, но вопрос заставил поднапрячься. Хороший вопрос для собесодования. Классная подача материала, пришёл из материалов по SOLID.

[@it-sin9k]

Спасибо! Я часто задаю этот вопрос на собеседовании) только 20% кандидатов отвечают правильно, вот и решил поделиться мыслями

[@someChicoRy]

очень круто. Посоветовали этот канал как дополнительный источник информации и я очень рад этому) много информации, которая разжевана и даже ребенок (вряд ли конечно) сможет понять) спасибо за труд

[@it-sin9k]

Спасибо за такой крутой отзыв! Очень приятно) на днях кстати выйдет новое видео)

[@БатырбекАйгалиев]

Как всегда очень полезное видео! Спасибо! Помню был случай на работе, кто-то в key прописал число, которое рандомно генерируется при каждом рендере. Наверное не стоит говорить, какие лаги это вызывало)

[@it-sin9k]

Спасибо :) Да, идея явно так себе)))

[@romanmed9035]

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

[@kostya167]

Отличный разбор темы. Посмотрел первое видео на этом канале и решил, что однозначно нужно подписаться. Спасибо за наглядную подачу материала 👍

[@it-sin9k]

Это наивысшая оценка нашему контенту)) сегодня у нас пришло порядка 200 новых подписчиков, и мы не можем понять, кто поделился ссылкой на нас. Не подскажите?)

[@kostya167]

@@it-sin9k я про ваш канал прочитал у Archakov Blog в телеграме - t.me/archakov_im

[@it-sin9k]

Вот оно как) а то я уже обыскался) откуда столько людей пришло)) Спасибо!

[@arsakaevislam2571]

@@it-sin9k тоже от Арчакова

[@bukanaka]

Теперь я разбираюсь в ключах!

[@hikarukun5126]

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

[@annaq4768]

Wow, первый раз решила узнать что это … и всё поняла 🧐😃👍

[@it-sin9k]

Рад слышать! Не зря делал это видео)

[@-X-Ray-]

Полезное видео, пригодилось бы на пару недель раньше на собеседовании :D

[@it-sin9k]

в следующий раз будем расторопнее))

[@artemy5594]

Мне кажется в этой теме нужно сказать пару слов о «reconciliation algorithm» и о том, как теряется производительность на больших массивах. Использовать index можно только на петпроджектах. Но и там все же лучше привыкать к id объекта, которое сами указываем. Чтобы индексы не повторялись при добавлении, можно написать счётчик и прибавлять при каждом добавлении единицу или использовать библиотеку uuid. За видео, лайк.

[@hikarukun5126]

можно создать просто в папке utils файл типа genId.ts let value = 0; const genId = (prefix = "id_") => prefix + ++value; export default genId; самый простой способ, при этом айдишники никогда не повторятся

[@JsMaster]

Можешь подробно рассказать о чем ты имел в виду? Если что я знаю что такое reconciliation, просто не понял как теряется производительность на больших массивах из-за index в качестве key

[@eugeniyvinnikov5480]

Чувак, почему ты на столько крут ?))

[@it-sin9k]

я только учусь)

[@aliaksandrvasiukhnevich1098]

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

[@it-sin9k]

ахахах) спасибо) ютуб интересно подкинул нас в разделе попасы))

[@vitaliiiashchuk1534]

Крутой контент делаете! Я про все видео, не только про это. Спасибо!

[@it-sin9k]

Спасибо! Будем продолжать в том же духе) Как раз, час назад закончил записывать аудио дорожку для следующего выпуска в новый плейлист P.S. Делитесь нашими видео с друзьями и коллегами)))

[@Virass]

Интересно получилось. Я все правильно пояснил перед раскрытием карт, так как понимаю как работает ключ, но в этот же момент я понял что не ответил бы на вопрос - а что же в нем такого, ну или пришлось бы думать как тут можно ответить, ну и второй момент, я осознал какая просадка производительности при использовании индекса в качестве ключа. Хотя опять же, понимаю данный механизм, но воедино мысли собрал только после ролика.

[@it-sin9k]

круто! значит не зря сделал этот ролик)

[@НикитаГончаров-е8ш]

Топ🔥🔥🔥 Во втором примере ошибся, думал, что будут анмаунты и маунты. А вот последний пример вообще супер

[@it-sin9k]

Не зря выдумывал примеры)

[@HandsomeRoman]

да всё же очевидно. просто внимательно читайте react документацию; она очень простая.

[@dmitriykhramykh9693]

Один момент, который я много где видел - это использование свойства key - для специфической перерисовки компонента. Это выглядит, как костыль. Прям в советах предлагают передать вместо key, к примеру, address, который периодически меняется

[@it-sin9k]

У меня как то был интересный случай с key. У нас на совсем широком экране, чуть порядок компонентов менялся. И я присвоил им key, чтобы указывать, что компонент просто изменил позицию, а не вымаунтился :)

[@dmitriykhramykh9693]

@@it-sin9k 🤔😯

[@spoonjeee4785]

красиво и наглядно, лайкус

[@it-sin9k]

Низкий поклонус ;-)

[@IntallTv]

Я ваобще кайфую, миллион подписчиков заслуживаешь

[@it-sin9k]

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

[@VictoriaSH100]

Давайте больше задачек из собеседований :)

[@it-sin9k]

Постараюсь)

[@arswarog]

Не знаю что написать, но рассказываешь круто!

[@it-sin9k]

Спасибо, что написал! Нам очень приятно!

[@pavelananich4867]

Спасибо за такие шикарные видосы!

[@it-sin9k]

Спасибо!

[@РоманТихонов-д1г]

для генерации уникальных id можно использовать библиотечку uuid. Очень проста в использовании. Она генерирует случайным образом айдишники для элементов. Они уж точно не совпадут. Ну это решение если с бэкенда id не дают )

[@it-sin9k]

Тут надо быть осторожным, чтобы uuid не каждый рендер генерил новый id, а только если элемент новый. Иначе будет много анмаунтов и маунтов на каждый рендер :)

[@Алексей-ш8э3л]

Здравствуйте! На минуте 7:20 мы же видим в обновлённом списке, что Дмитрий нет. Так почему же вы говорите что onMounted Дмитрий?

[@it-sin9k]

там вроде как фраза "увидели will unmount Andrey, а не will unmount Dmitry". Т.е. там unmount а не onMounted

[@pavel.karpets]

Не понял, а как можно было по другому подумать. Ждал какого то более необычного разрешения.

[@it-sin9k]

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

[@ivenAgario]

Срываешь покровы с самых сокровенных тайн React

[@it-sin9k]

Рад стараться)

[@maksimstovburov9391]

В таком случае, использовать в качестве ключа Math.random() тоже считается плохой практикой? Получается, что при каждом перерендеринге будет вызываться эта функция и постоянно key будет меняться

[@it-sin9k]

Все верно

[@andrewwest9309]

Правильно ответил )

[@it-sin9k]

красавчик!)

[@Ramosok]

Круто очень!!!

[@antondanilov4425]

Четко! Спасибо

[@Mr.Bellamy]

Словил артефакт на работе. Исправил, но есть незакрытые моменты. Тут не рассмотрен наверное самый интересный случай, когда в списке попадаются одинаковые ключи, то как ведет себя реакт. И там очень необычное поведение) И как по мне очень нелогичное))

[@it-sin9k]

по идее он ведет себя как сломанное приложение) есть ли смысл рассматривать такие кейсы?

[@Mr.Bellamy]

@@it-sin9k мне чисто интересно как это под капотом получается. Это же по сути более глубокое понимание реакта, а значит я плохо знаю реконсилешнс. Это не пробел в знаниях, а пробееееелище (с) Нагиев Пс. Ушел учить реакт )))

[@viktorkasap]

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

[@it-sin9k]

решение чего именно? я мб уже видео подзабыл)

[@viktorkasap]

@@it-sin9k ...что делать с уникальными ключами, например _.uniqueId Lodash нам не подходит потому что мы получаем каждый раз новый айди...

[@it-sin9k]

@@viktorkasap так их надо просто генерить 1 раз, а не каждый рендер. Рисуете первый раз элемент, вот заранее для него uniqueId сгенерируйте.

[@Snezh88k]

Круто! Потратил пол часа, пока разобрался, почему у меня при удалении элемента по индексу, начинается каша. Так что да, твой ролик был бы еще полезнее, если бы я его увидел до. Но свои ошибки обучают, как ничто другое))

[@Snezh88k]

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

[@anton-vr5xw]

очень классно объяснил, спасибо)

[@maksrygaev657]

Лучший контент по реакту на ютубе в русском сегменте на одном уровне с UlbiTV !

[@it-sin9k]

Высокая оценка, спасибо!)

[@vladpronin5033]

Привет, Синяк. Есть вопросик по поводу функциональных компонентов. Правильно ли я понимаю, что при использовании memo с функциональными компонентами и PureComponent с классовыми от них следует ожидать разное поведение? Или я как то неправильно использую функциональные компоненты? P.S. Я про случай, когда в key проп пихается индекс массива. В функциональных компонентах я использовал useEffect, где также возвращал функцию, и как массив зависимостей передавал проп name.

[@it-sin9k]

честно говоря, я с трудом могу понять ваш кейс, сбросьте код пожалуйста

[@vladpronin5033]

@@it-sin9k codesandbox.io/s/goofy-pasteur-20xly?file=/src/ Вот код, здесь компонент User - функциональный, Admin - классовый. При использовании индекса массива как key пропа поведение у этих двух компонентов различается. Собственно сам вопрос: такое поведение и следовало ожидать, так как это два разных подхода или я неправильно написал функциональный компонент? Спасибо большое за обратную связь)

[@it-sin9k]

Вечерком гляну)

[@it-sin9k]

Судя по твоему примеру, работают они одинаково. Я думаю, тебе показалось, что они работают по разному из-за того, что ты в return написал console.log с фразой unmount. Хотя этот консоль лог вызовется не только в случае unmount, но и в случае update.

[@vladpronin5033]

@@it-sin9k Спасибо за уделенное время и разъяснение. Правильно ли я понял, что при обновлении функциональный компонент будет демонтироваться, а затем снова монтироваться, поэтому и будет вызываться возвращаемая функция useEffect? Или мне стоит получше покопаться в документации?

[@vlads4332]

ЭТО ЛУЧШЕЕЕЕЕ И САМОЕ НАГЛЯДНОЕ !!!!!! ЛАЙК ПОДПИСКА КОЛОКОЛ ЕПТЬ!!! СРАЗУ !!!

[@it-sin9k]

Добро пожаловать на канал!)

[@АлександрВидин-с6я]

Гдеж ты раньше был) Таких каналов с гулькин нос)

[@it-sin9k]

Добро пожаловать!) у нас много полезного контента)

[@n.y.synytskyi1118]

Ответил правильно, смотрю дальше... Интересно!

[@pandalove6795]

Я хочу написать решение домашки, надеюсь не будет спойлером хах. Короче, все элементы под элементом, который мы удалям, а так же и сам элемент. Будут размонтированы и все кроме удаляемого, будут вмонтированы. Т.к. в users роли идут через один. То у всех элементов поменяются типы. Например если сделать одного админа под индексом 4 и удалить элемент с индексом 2. То будет 1 UPDATE с 2 индекса по 3. А вот с 3 на 4 и с 4 на 5 будет опять размонтирование и вмонтирование. Т.к. типы изменились. Короче надо просто помнить, что React эти key использует (не знаю точно как, но представим) в объекте, где ключ это разумеется key, а значение сам компонент. Так вот, когда он в очередной раз проходит по users он смотрит на этот объект и на компонент, который сейчас есть под этим ключом. Он смотрит, если типы разные, то удаляем компонент который был, и вставляем новый. Если типы одинаковые, то просто обновляем пропсы. Если уже пропсы разные то PureComponent обновит компонент.

[@novikov-pavel]

Нафига нужен id, если он к чёрту будет меняться?!

[@eduard_dev]

Perfect 👍

[@aleksd286]

Единственный канал на ютубе который Реакт так хорошо показывает да еще и в таких дебрях куда никто не лезет

[@it-sin9k]

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

[@aleksd286]

@@it-sin9k интересно было бы послушать как реакт считывает название функций, ищет там startsWith('use') и зажимает данные в памяти

[@it-sin9k]

@@aleksd286 имеешь ввиду как работают хуки?

[@aleksd286]

@@it-sin9k да, реакт же смотрит на название фукнций? чтобы определить это хук или нет. Это же не просто конвекция писать хуки через use?

[@it-sin9k]

@@aleksd286 На сколько я знаю, они не чекают нигде имя use. Все хуки, это просто внутренние функции. А use вроде только eslint чекает. Есть правила такие. Вот видео где исходники хуков я впервые влез: kzbin.info/www/bejne/oZSrdoqrqZJ3i6M

[@ВикторБогатырёв-у5ф]

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

[@lvivduncan]

и что делать, если нет айди?) генерировать рендомный каунтер?

[@it-sin9k]

Все зависит от ситуации. Если вы делаете скелетон с одинаковыми эллементами, то и index пойдет. А если вы делаете например массив настроек для выпадающего меню, то можно самому константы придумать каждому объекту. Все зависит от ситуации :)

[@hihoho1578]

Спасибо

[@yakub8798]

круто , круто !!!

[@hasanchulliyev4971]

да правда крут 👍

[@it-sin9k]

Спасибо!

[@vitabramov89]

ответил правильно💪

[@it-sin9k]

Красава!)

[@oleksiikhelemelia9218]

ответил правильно

[@it-sin9k]

красава!

[@mrstronciy1060]

Всё ли? Не знаю, что это!)

[@alexandrchazov6185]

React key

[@djohardudaev95]

дыд апдейт

[@ZET_GAMES_SMR]

Отличное видео, очень информативное, нужно будет более детально изучить данный вопрос. А то на коммерческих проектах делаю key={Date.now + Math.Random()} - лишь бы отвязался от меня реакт))) Но есть вопрос, допустим я перейду на светлую сторону и не буду использовать индексы, а id попросту нет, есть ли какой-то универсальное решение?

[@it-sin9k]

Универсального решения как такого нет. Есть разные приемы, которые мы используем: в случае перечисления сущности с сервера там конечно будет id. Но в случае например пунктов какого-либо меню, которое храним в конфиге в виде массива объектов, там нет id как такового. Поэтому мы на всех проектах договаривались например просто завести дополнительное поле id и придумать туда строковое значение уникальное в рамках этого списка, например: create, edit, delete, copy.

[@ZET_GAMES_SMR]

@@it-sin9k Я так понимаю тут нужно разговаривать с архитектором, что бы в будущих проектах избавится от таких проблем. Спасибо огромное за Ваши труды, смотрю все видео, очень познавательный контент!

[@oleggrishechkin5059]

@@ZET_GAMES_SMR non-keyed вариант (где ключи индексы или ключей вовсе нет) плох при вставке элемента или удалении элемента в середине или начале. Рандом вообще никогда нельзя использовать, он плох всегда.

[@azzect]

@@ZET_GAMES_SMR не обязательно разговаривать с архитектором, достаточно написать функцию, которая будет генерировать уникальное поле uniqueKey у объектов массива, а затем использовать его в качестве key

[@romandeveloper7720]

uuid, например

[@hikarukun5126]

Допустим у нас есть 5 юзеров типа { id: number; name: string; } У нас есть родительский контейнер который будет хендлить стейт и удалять элементы, а также есть дочерний PureComponent или memo в зависимости от используемого подхода Допустим мы рендерим c key={index} Если передавать в компонент callback функцию, которая будет удалять элемент по клику мы получим следующее: Последний элемент будет UNMOUNТ, всё как в видео При этом как элементы идущие до удалённого так и те что после будут перерисованы и для всех выполнится DIDUPDATE ***Почему спросите вы? (Возможно и не спросите)*** А дело в том, что callback функцию которая будет удалять элемент нужно вынести отдельно из рендера и обернуть в useCallback, для того, чтобы у нас всегда была мемоизированая функция с одной и той же ссылкой, в этом случае у нас будет выполняться всё как на видео При удалении элемента, все последующие после него будут перерисованы и выполнится DIDUPDATE, а самый последний элемент будет UNMOUNT

[@eugenex8892]

Ну блин, нормальное поведение ключа очевидно, не понятно зачем эту тему жевать? Вообще если я знаю что у меня в массив только добавляются+изменяются значения то конечно использую index. Если добавляются+изменяются+удаляются, то наилучший способ при отсутствии id, создать его произвольно от math.random = `{id: Math.random().toString(16).substring(2), name: "Vasja"}`

[@it-sin9k]

Судя по комментариям под видео и людям, которые проходили у меня собеседование многие не знали в деталях, как это работает. То что очевидно для одного, может быть абсолютно не очевидно для другого :) А мои поздравления, если вы хорошо понимаете как это работает)

[@eugenex8892]

@@it-sin9k наверно... сам читаю комменты и начинаю понимать почему `npm i is-odd` так популярна. А у самого слезы наворачиваются.. Если пенсионерка вымрет, то мир отупеет...

[@it-sin9k]

@@eugenex8892 Если люди чего то не знают, это не такая уж трагедия) Может они в чем то другом более прокачены)

[@Алексей-т2х8й]

+

[@aktotuttttt]

я не правильно ответил

[@it-sin9k]

Это же хорошо) значит для вас этот контент был крайне полезным и вы прокачались)

[@aktotuttttt]

@@it-sin9k спасибо с удовольствием просмотрю с тетрадкой все ваши видео! Очень хочу стать крутым разрабом как Вы

[@it-sin9k]

Очень лестно) я думаю у вас все получится)

[@artyomkhreshchikov5959]

Почему на 2:25 первым идет will unmount, а не did update? это из-за приоритетов внутри реакта?

[@it-sin9k]

я точно не изучал этот вопрос. Поэтому поделюсь просто фантазиями)) По идее идет обход дерева компонентов, и оно выполняем всю работу по текущему компоненту и идет дальше. Т.е. условно Dmitriy просто раньше находился в списке, вот его компонент обслужили полностью, а потом перешли к следующему

[@xo2895]

Очень недооцененный канал

[@it-sin9k]

Спасибо за такую высокую оценку!

[@fghdfghdfgghdstwesdfjtykjyfgk]

Спасибо, не вдавался никогда в подробности как он работает, просто придерживаюсь тому, что если с бэка приходит уникальное значение какое-то - то ставить его, если нет то просто index, у меня никогда не возникало с этим проблем, ну если меняться будут то там уже конечно нужно что-то придумать. Вообще классный канал, вроде и знаю реакт и пол года коммерческого, но такие углубленные вещи не сильно понимаю, полезно для развития думаю

[@it-sin9k]

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