Не делай такое с useState! Топ 5 ошибок junior React-разработчика
HTML-код
- Опубликовано: 22 май 2024
- Часто начинающие React-разработчики используют хук или неправильно или не по назначению. В этом видео мы попытаемся разобраться с самыми популярными ошибками/багами с использованием useState и научимся их исправлять.
⏰ Таймкоды:
00:00:00 Начало
00:00:58 useState + setInterval/setTimeout
00:04:48 Работа со старым стейтом
00:08:08 Обращение к undefined внутри стейта
00:14:25 Не надо хранить в useState все данные
00:16:44 Неправильное изменение стейта (мутация)
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
#react #usestate #state #reactstate #стейт #setstate #junior #реакт #разработка
![Don Toliver - Attitude (feat. Charlie Wilson & Cash Cobain) [Official Music Video]](http://i.ytimg.com/vi/A90X6-jIe1g/mqdefault.jpg)
Если объяснить весь ролик коротко, то вот:
1. Хочешь предыдущее значение ? Используй callback функцию с аргументом в виде предыдущего значения
2. Не хочешь ошибок в "пустом" useState ? Ставь default случай
3. Данные обновляются ? Используй useState
4. Манипуляция над списками:
4.1.Хочешь обновить список ? Делай так: setState(...state, newState)
4.2. Хочешь удалить из списка элемент ? Делай так:
4.2.1. const cloneTasks = [...tasks]
4.2.2. cloneTasks.splice(${нужный индекс задачи}, 1)
4.2.3. setState(...state, cloneTasks)
4.3. Хочешь изменить элемент списка ? Делай так:
4.3.1. const formedTasks = tasks.map(task, i => { if (i === 1) { return { text: 'newText' } }} return task)
4.3.2. setState(...state, formedTasks)
Получается топ 4?))
а почему именно splice, а не скажем .filter ? )
@@kawaikaino5277 я лично выбрал splice, чтобы проще делать отладку, в случае чего-то. Кнч, можно сделать что-то такое:
1. const formedTasks = state.filter(...)
2. return formedTasks
Но также, в splice ты можешь начать с индекса таски, которую тебе нужно удалить, а не идти по целому списку. Как бы да, ты используешь проход по массиву, так как и filter, но в конкретном случае, как я понимаю, splice начинает с определённого индекса массива и затем уже делает те действия, которые нам нужны. По поводу "проход по массиву", я начал разъяснять так, как примерно работает под капотом
Если в чём-то не прав, поправьте меня пожалуйста))
@@GroundGamer По поводу, прохода по всему массиву, при использовании filter.
а. В большинстве случаев, это экономия на муравьях, т.к чаще всего не приходится работать с длинными массивами
б. Ну уж, если пришлось обработать длинный, на сколько мне известно движок под капотом оптимизирует выполнение filter (но это не точно)
Спасибо за ответ
@@GroundGamer зачем здесь переменная formedTasks? filter иммутабелен, можно сразу делать return state.filter(...)
@@lirrr6555 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу
Я перерыл много обучающих видео на youtube включая англоязычные, но твоя подача контента и умение объяснять превосходят всё и вся. Спасибо большое)
мне кажется ты просто плохо ищешь)) Многие штуки он берет как раз из зарубежного ютуба.
@@user-wl2xp8yo6x Привет. Можешь порекомендовать зарубежных ютуберов по реакту?
нигде не обходится без льстецов!
Огромная благодарность за такое видео про особенности useState! Будем ждать про другие хуки в том же формате!
Спасибо за работу, любое обучающее видео от вас интересно, тем более такого формата. Интересен ещё useEffect с его побочками и проблемами.
Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!
Очень все понятно и доступно, спасибо тебе за такой классный материал 👍 Таких очень мало, кто может объяснить так доходчиво и просто
Ты невероятно круто объясняешь!!! Запиши видео по всем основным хукам, это будет супер
Спасибо, полезная информация, как и сама рубрика разбора типичных и не только ошибок)
Замечательный видеоролик! Благодарю за Ваш труд! Успехов! 😊👍
Отличный контент! Продолжайте, мы ждём!
Отличный ролик, полезная инфа!) Ждем еще
Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)
Все что ты делаешь, все интересно. Продолжай в том же духе!
Очень круто! Спасибо!
Классно!
Хотелось бы про useEffect как продолжение ну и про остальные тоже. 😀
Плакать от счастья хочется. Очень актуально🥲Спасибо огромное❤❤❤❤❤
Спасибо, очень полезно разработчикам любого уровня. С массивами сам в свое время долго мучался и не мог понять.
это ровно то что я искал! жаль что только один хук был описан, жду еще подобных видео, лайк, подписка
Продолжай!Спасибо тебе за объяснения!
Очень полезное видео, спасибо! Я, как начинающий , не все смог переварить,. но от половины видео есть реальная польза! :)
Неплохие советы) Лайк!
Интересно! Давай еще! Спасибо!)
Хорошее обобщающее видео. Думаю будет интересно увидеть нечто подобное о пропсах.
Спасибо большое, благодаря данному видео я теперь не допускаю подобных ошибок!🙏
Спасибо! очень классно объясняешь! Продолжай в том же духе и будет зашибись. ))
Очень интересно! Буду ждать видео и для других хуков :)
Как всегда красавчик, всё по полочкам!
уже заждались новые видео!
Классный ролик, много для себя подчеркнул.
Арчаков, большое спасибо!
Спасибо. Стала понятна 2 глава документации React
спасибо большое! Вот тебе комментарий, хотелось бы больше таких видео по реакту!
действительно полезное видео. спасибо
Очень интересно даже того, кто не знает реакт, но знает js! Давай ещё!))
Спасибо большое! Теперь я понял как это работает)
Ухты, спасибо большое. Столько времени сидел и не понимал, почему меняю state объекта, а ничего не рендерится. Как больно быть новичком в чем-то )
Как для начинающего разработчика, очень полезное видео, Спасибо !
Лайк поставлен , комментарий соответственно 🌚🫡
Максимально понятно и доходчиво
Топ тема, делай больше таких видео, я как раз изучаю реакт, и был вопрос как лучше все это использовать нельзя же все хуки использовать на абум
Будет полезной инфа про основные хуки и их работу под капотом, а так же их стоимость выполнения, это поможет лучше понимать когда стоит их применять.
Супер спасибо!!! Если так разберать все топовые хуки, то будет агонь, агнинский!!!
очень интересно!
расскажи пожалуйста про использование хука useLayoutEffect
Огонь! 🔥
Благодарю, неплохо помог
Очень очень классный ролик. Да и вообще канал крутой. Спасибо за Реакт-пиццу
спасибо! хорошо всё.
Отличное видео
Круто. Давай про другие хуки. С более конкретными примерами использование
Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)
молодец, что сам нашёл 👍 в идеале, нужно стараться сначала самому находить решения любым возможным способом и только потом искать его в подобных роликах и других готовых решениях
@@ArchakovBlog а какая у тебя клавиатура?
Спасибо!
Пишу лайк, ставлю комментарий и показываю что мне интересно )
Супер контент !!
Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))
Збс, продолжай!
Доброе утро! Про useLayoutEffect() было бы суперкруто :)
Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей.
То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего
А так за видос респект, прошел по основным "грубым" ошибкам!:)
Для понимания надо сначала на этом же канале посмотреть очень понятное видео о useEffect
Привет) спасибо за видео! а когда будет про (не используй везде useCallback и memo) ?
Ролик и интересный и полезный! Сделай пожалуйста по остальным хукам!
юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп.
есть ли смысл ломать голову в коде на классах в 23-24 годах?
так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так
Будут ли еще видео по React Native? Жду с нетерпением
Да, давай ещё эту рубрику
Бро, продолжай пожалуйста!!!
Спасибо за крутотень
Очень ждем новые видео
Будут ли новые полные курсы (на несколько видосов)? Если да, то будут ли для premiddle/middle и как скоро?
Денис ждем новый интенсив по Next.js + TypeScript, оч хотим((
Формат отличный
привет еще раз ! знаю сейчас не луяшое время , но нету ли в планах сделать какой-то малеьний проект используя react , redux , rtk query , ts ? спасибо
Топи топи интересно же и залипательно
Расскажи по возможности, пожалуйста про все костыли useCallback() & useEffect()
Привет , ,с Новым годом ! а можно более подробно о мутациях ? Как правильно использовать с redux toolkit , спасибо
Хочу больше роликов про best practices
Спасибо за некоторые интересные моменты.
Маленький вопросик: а почему setInterval не убили в ретерне юзэффекта?
Важно также возвращать cleanup callback из useEffect когда есть любые подписки и счётчики.
Ждём видео об остальных хуках
18:20
Привет.
Что думаешь, если всегда использовать в таком виде:
setTask((tasks) => [...task, text])
какие плюсы:
1. Ты всегда работаешь с данными, которые хранит хук
2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов
🤔
Теперь понятно что такое мутация объекта.
Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?
Гоу видос про useCallback | useMemo
Спасибо большое !!! очень крутая подача ) а на boosty ты ессть новый контент ?
Сначала новый контент выходит там. Это видео появилось в Ютубе через неделю только, поле бусти
@@ArchakovBlog
спасибо
Да, давай пожалуйста про useMemo и useCallback
👏👍
Привет Арчаков, пожалуйста, сделайте видео о миксе useContext + useReducer в качестве замены Redux-а.
Гоу видосы про useForm и про валидацию
А почему в примере с тасками вы не работаете с предыдущими значениями как в первом примере?
👍
❤🔥
В первом случае что нам мешает добавить count в массив зависимости в useEffect?
setState(prev=>), вызывает общий стейт у компонента который ты будешь использовать на одной странице , пример : толерантный с 3 значениями которые ты можешь переключать , создаешь несколько элементов на странице , начинаешь переключать , и воля у тебя во всех компонентах меняется значения , хотя ты в других его не менял , так что нужно быть аккуратным
так это корректная работа useState ведь. он хранит одно состояние, несмотря на то, что разные компоненты снизу используют его
Спасибо за видео. Чнм больше хуков, тем лучше.
Кайф
Можете подсказать как сделать такое же плавное перемещение курсора?
Подскажи, есть ли у тебя что ни будь. где рассказываешь как запустить перерисовку наружних компонентов из внутренних?
Перерендер родителя из потомка?
1. Callback функцией, переданной как пропс.
2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)
Про usememo с использованием react devtools (как проверять лишние отрисовки) пожалуйста расскажи
Норм, новичкам самое то
а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?
Ну это прям база
Хочешь удалить из списка элемент делай просто filter c нужными условиями
А как сделать подсказки в выпадающем списке, как на 20:29?