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

Рет қаралды 36,667

Күн бұрын

Я время от времени провожу собеседования, и когда вопрос касается React key, чаще всего я вижу недоумевающий взгляд, намекающий “Да, там и спрашивать вроде нечего?”. Если Вам кажется React key понятным и простым. Тогда давайте проведем мини собеседование...
Поддержать Айти Синяка можно здесь:
KZfaq: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
Таймкоды:
00:00 Объявление темы
00:25 Вопрос на собеседовании
02:11 Ответ
02:41 Разбираем ответ
04:18 Стоит ли использовать key={index} по мнению документации
05:13 Негативный пример использования key={index}
05:48 Ответ
06:06 Разбираем ответ
07:41 Домашка
08:21 Подписывайтесь!
08:32 Рекомендованные видео
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Пікірлер: 137

@ArchakovBlog 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@ShoTHIk 2 жыл бұрын

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

@user-te9ci1tx4x Жыл бұрын

@@ShoTHIk 😁

@anton-vr5xw 3 жыл бұрын

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

@user-bv8eq2vc5r Жыл бұрын

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

@hikarukun5126 Жыл бұрын

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

@antondanilov4425 3 жыл бұрын

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

@vitaliiiashchuk1534 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@pavelananich4867 Жыл бұрын

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

@it-sin9k Жыл бұрын

Спасибо!

@aliaksandrvasiukhnevich1098 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@n.y.synytskyi1118 Жыл бұрын

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

@Ramosok 2 жыл бұрын

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

@someChicoRy 10 ай бұрын

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

@it-sin9k 10 ай бұрын

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

@ineptDev 2 жыл бұрын

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

@dmitriystoyanov933 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@dmitriystoyanov933 2 жыл бұрын

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

@kostya167 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@kostya167 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@arsakaevislam2571 Жыл бұрын

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

@yakub8798 Жыл бұрын

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

@spoonjeee4785 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@user-nd5zd5kc5k Жыл бұрын

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

@it-sin9k Жыл бұрын

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

@user-ku2hc3mr3m 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@romanmed9035 2 жыл бұрын

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

@hihoho1578 3 жыл бұрын

Спасибо

@eduard_dev Жыл бұрын

Perfect 👍

@arswarog 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@viktorsoroka4510 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@annaq4768 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@bukanaka 2 жыл бұрын

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

@-X-Ray- 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@andrewwest9309 Ай бұрын

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

@it-sin9k Ай бұрын

красавчик!)

@artemy5594 Жыл бұрын

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

@hikarukun5126 Жыл бұрын

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

@eugeniyvinnikov5480 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@VictoriaSH100 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

Постараюсь)

@rikithikatakizu2 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

Красава!)

@IntallTv 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@Virass 5 ай бұрын

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

@it-sin9k 5 ай бұрын

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

@hikarukun5126 Жыл бұрын

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

@viktorkasap Жыл бұрын

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

@it-sin9k Жыл бұрын

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

@viktorkasap Жыл бұрын

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

@it-sin9k Жыл бұрын

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

@hasanchulliyev4971 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

Спасибо!

@oleksiikhelemelia9218 Жыл бұрын

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

@it-sin9k Жыл бұрын

красава!

@dmitriykhramykh9693 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@dmitriykhramykh9693 2 жыл бұрын

@@it-sin9k 🤔😯

@maksrygaev657 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@Snezh88k Жыл бұрын

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

@Snezh88k Жыл бұрын

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

@user-uo5jk2yz1w Жыл бұрын

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

@it-sin9k Жыл бұрын

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

@vlads4332 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@HandsomeRoman Жыл бұрын

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

@pavel.karpets 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@maksimstovburov9391 Жыл бұрын

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

@it-sin9k Жыл бұрын

Все верно

@vladpronin5033 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@vladpronin5033 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@vladpronin5033 3 жыл бұрын

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

@Mr.Bellamy 4 ай бұрын

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

@it-sin9k 4 ай бұрын

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

@Mr.Bellamy 4 ай бұрын

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

@user-lm9nr4eo2f 4 ай бұрын

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

@it-sin9k 4 ай бұрын

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

@alexandrchazov6185 2 жыл бұрын

React key

@pandalove6795 9 ай бұрын

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

@DEDUSHKA_SIM 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@DEDUSHKA_SIM 3 жыл бұрын

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

@oleggrishechkin5059 2 жыл бұрын

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

@azzect 2 жыл бұрын

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

@romandeveloper7720 Жыл бұрын

uuid, например

@lvivduncan 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@c7rsed118 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@aleksd286 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@aleksd286 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@aleksd286 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@ivenAgario 11 ай бұрын

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

@it-sin9k 11 ай бұрын

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

@djohardudaev95 3 ай бұрын

дыд апдейт

@user-ge2qk4cm1j 3 жыл бұрын

@mrstronciy1060 3 жыл бұрын

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

@artyomkhreshchikov5959 3 жыл бұрын

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

@it-sin9k 3 жыл бұрын

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

@novikov-pavel Жыл бұрын

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

@aktotuttttt 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@aktotuttttt 2 жыл бұрын

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

@it-sin9k 2 жыл бұрын

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

@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 Если люди чего то не знают, это не такая уж трагедия) Может они в чем то другом более прокачены)