Если объяснить весь ролик коротко, то вот: 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?))
@@kawaikaino5277 я лично выбрал splice, чтобы проще делать отладку, в случае чего-то. Кнч, можно сделать что-то такое: 1. const formedTasks = state.filter(...) 2. return formedTasks Но также, в splice ты можешь начать с индекса таски, которую тебе нужно удалить, а не идти по целому списку. Как бы да, ты используешь проход по массиву, так как и filter, но в конкретном случае, как я понимаю, splice начинает с определённого индекса массива и затем уже делает те действия, которые нам нужны. По поводу "проход по массиву", я начал разъяснять так, как примерно работает под капотом Если в чём-то не прав, поправьте меня пожалуйста))
@@GroundGamer По поводу, прохода по всему массиву, при использовании filter. а. В большинстве случаев, это экономия на муравьях, т.к чаще всего не приходится работать с длинными массивами б. Ну уж, если пришлось обработать длинный, на сколько мне известно движок под капотом оптимизирует выполнение filter (но это не точно) Спасибо за ответ
@@lirrr6555 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу
Как намучился с этим счетчиком, пытаясь сделать все самому. Даже GPT мучал, посмотрев этот видос, наконец догнал. Спасибо за подробное и понятное пояснение.
Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)
молодец, что сам нашёл 👍 в идеале, нужно стараться сначала самому находить решения любым возможным способом и только потом искать его в подобных роликах и других готовых решениях
Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей. То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего А так за видос респект, прошел по основным "грубым" ошибкам!:)
Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)
Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!
Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))
юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп. есть ли смысл ломать голову в коде на классах в 23-24 годах? так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так
18:20 Привет. Что думаешь, если всегда использовать в таком виде: setTask((tasks) => [...task, text]) какие плюсы: 1. Ты всегда работаешь с данными, которые хранит хук 2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов 🤔
setState(prev=>), вызывает общий стейт у компонента который ты будешь использовать на одной странице , пример : толерантный с 3 значениями которые ты можешь переключать , создаешь несколько элементов на странице , начинаешь переключать , и воля у тебя во всех компонентах меняется значения , хотя ты в других его не менял , так что нужно быть аккуратным
Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?
а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?
Перерендер родителя из потомка? 1. Callback функцией, переданной как пропс. 2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Я перерыл много обучающих видео на youtube включая англоязычные, но твоя подача контента и умение объяснять превосходят всё и вся. Спасибо большое)
мне кажется ты просто плохо ищешь)) Многие штуки он берет как раз из зарубежного ютуба.
@@ТёмаКоролёв-к6ф Привет. Можешь порекомендовать зарубежных ютуберов по реакту?
нигде не обходится без льстецов!
Если объяснить весь ролик коротко, то вот:
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 Можно, конечно. В целом, хоть однострочные решения и "красивы", но иногда, они сложны для отладки, допустим когда у нас в фильтре (или ещё в каком либо методе массива), содержится ещё один массив по которому нам нужно пройтись, и вся их "красота" перестаёт быть "красотой" и превращается в "чудовище", которое ещё бывает сложно прочитать разрабу. Поэтому, я выбрал для себя такое написание переменных, как за основу
Как намучился с этим счетчиком, пытаясь сделать все самому. Даже GPT мучал, посмотрев этот видос, наконец догнал. Спасибо за подробное и понятное пояснение.
Ты невероятно круто объясняешь!!! Запиши видео по всем основным хукам, это будет супер
Спасибо за работу, любое обучающее видео от вас интересно, тем более такого формата. Интересен ещё useEffect с его побочками и проблемами.
обезательно нужно , получаю удовольсвия понимая то что раньше не знал
Очень полезный видос! Жалко что не посмотрел его пару недель назад, сэкономил бы кучу своего времени. (к решению пришел сам, перепробовав кучу вариантов и вникнув в суть самой проблемы мутации массивов. Но времени затратил на это немеряно.)
молодец, что сам нашёл 👍 в идеале, нужно стараться сначала самому находить решения любым возможным способом и только потом искать его в подобных роликах и других готовых решениях
@@ArchakovBlog а какая у тебя клавиатура?
Супер спасибо!!! Если так разберать все топовые хуки, то будет агонь, агнинский!!!
Ухты, спасибо большое. Столько времени сидел и не понимал, почему меняю state объекта, а ничего не рендерится. Как больно быть новичком в чем-то )
это ровно то что я искал! жаль что только один хук был описан, жду еще подобных видео, лайк, подписка
Спасибо большое, благодаря данному видео я теперь не допускаю подобных ошибок!🙏
Спасибо, очень полезно разработчикам любого уровня. С массивами сам в свое время долго мучался и не мог понять.
Начиная с 10-й минуты, по поводу undefined в users: как-то немного замудренно объяснял) Просто должно быть понимание, что useEffect отрабатывает только ПОСЛЕ рендера компонента. Поэтому и undefined, потому что при рендере useEffect ещё не отработал, а начнет свое выполнение только после отрисовки разметки и уже тогда из-за setUsers произойдет ре-рендер и мы увидим наших пользователей.
То есть людям нужно донести именно базовое понимание того, почему мы undefined сначала получаем, иначе никто так и не поймет ничего
А так за видос респект, прошел по основным "грубым" ошибкам!:)
Для понимания надо сначала на этом же канале посмотреть очень понятное видео о useEffect
Классно!
Хотелось бы про useEffect как продолжение ну и про остальные тоже. 😀
Пишу лайк, ставлю комментарий и показываю что мне интересно )
Очень все понятно и доступно, спасибо тебе за такой классный материал 👍 Таких очень мало, кто может объяснить так доходчиво и просто
Как для начинающего разработчика, очень полезное видео, Спасибо !
Спасибо большое за такие видео. Просто не представляешь как твой мини-урок помог мне с задачей. Могу скрин потом выслать))) захотелось даже статью а блоге написать)
Лайк поставлен , комментарий соответственно 🌚🫡
Спасибо за урок! Очень грамотно объясняете материал и к тому же в таких тонкостях. Для меня как новичка - это просто бесценная информация! Успехов Вам!
Очень полезное видео, спасибо! Я, как начинающий , не все смог переварить,. но от половины видео есть реальная польза! :)
Отличный контент! Продолжайте, мы ждём!
Очень интересно даже того, кто не знает реакт, но знает js! Давай ещё!))
Огромная благодарность за такое видео про особенности useState! Будем ждать про другие хуки в том же формате!
Спасибо, полезная информация, как и сама рубрика разбора типичных и не только ошибок)
Плакать от счастья хочется. Очень актуально🥲Спасибо огромное❤❤❤❤❤
спасибо большое! Вот тебе комментарий, хотелось бы больше таких видео по реакту!
Замечательный видеоролик! Благодарю за Ваш труд! Успехов! 😊👍
Отличный ролик, полезная инфа!) Ждем еще
Спасибо! очень классно объясняешь! Продолжай в том же духе и будет зашибись. ))
Доброе утро! Про useLayoutEffect() было бы суперкруто :)
Все что ты делаешь, все интересно. Продолжай в том же духе!
Благодарю за видео и вообще контент, очень полезный! Лично мне было бы интересно посмотреть как писать CSR приложение на React, с db на postgres, sequelize-cli, сервер на express, webpack, регистрация-авторизация на JWT(c access token и refresh token), bcrypt, модалки, мультеры(загрузка-выгрузка файлов) и конечно как писать endpoints api и render на бек, всё связывать и защищать. Мне думается что задача сложна для начинающего фулстека, поднять сервак, и на хуках параллельно связывать фронт и бэк. Книжный клуб например. А вообще хотел узнать что за тема в VSCODE??? =))))
Хорошее обобщающее видео. Думаю будет интересно увидеть нечто подобное о пропсах.
Денис ждем новый интенсив по Next.js + TypeScript, оч хотим((
Спасибо. Стала понятна 2 глава документации React
Спасибо большое! Теперь я понял как это работает)
уже заждались новые видео!
Интересно! Давай еще! Спасибо!)
Классный ролик, много для себя подчеркнул.
Продолжай!Спасибо тебе за объяснения!
Очень интересно! Буду ждать видео и для других хуков :)
Круто. Давай про другие хуки. С более конкретными примерами использование
очень интересно!
расскажи пожалуйста про использование хука useLayoutEffect
Как всегда красавчик, всё по полочкам!
Неплохие советы) Лайк!
Топ тема, делай больше таких видео, я как раз изучаю реакт, и был вопрос как лучше все это использовать нельзя же все хуки использовать на абум
Привет) спасибо за видео! а когда будет про (не используй везде useCallback и memo) ?
Хочу больше роликов про best practices
Гоу видос про useCallback | useMemo
Расскажи по возможности, пожалуйста про все костыли useCallback() & useEffect()
Очень очень классный ролик. Да и вообще канал крутой. Спасибо за Реакт-пиццу
Гоу видосы про useForm и про валидацию
Спасибо. Помог решить проблему.
Арчаков, большое спасибо!
Ждём видео об остальных хуках
Огонь! 🔥
Ролик и интересный и полезный! Сделай пожалуйста по остальным хукам!
действительно полезное видео. спасибо
Будут ли еще видео по React Native? Жду с нетерпением
Очень круто! Спасибо!
юзколбек и юзмемо ошибки ждем) и хотелось бы больше по тулкиту инфы и парочку мнений на счет актуальности стека через обычный редакс и классы, не приведет ли это к потери актуальности на рынке через пару лет такой работы, при активном развитии тулкита и функциональных комп.
есть ли смысл ломать голову в коде на классах в 23-24 годах?
так же хотелось бы услышать мнение о TS, очень многие его нахваливают, но я слышал мнение от очень крутых разрабов, что тс нужен только если ты изначально пишешь хреновый код ибо слабые разрабы хейтят не строгую типизацию, а потом скилапнувшись наоборот восхваляют возможности динамической типизации... как то так
Будет полезной инфа про основные хуки и их работу под капотом, а так же их стоимость выполнения, это поможет лучше понимать когда стоит их применять.
Важно также возвращать cleanup callback из useEffect когда есть любые подписки и счётчики.
Максимально понятно и доходчиво
Да, давай ещё эту рубрику
Спасибо большое !!! очень крутая подача ) а на boosty ты ессть новый контент ?
Сначала новый контент выходит там. Это видео появилось в Ютубе через неделю только, поле бусти
@@ArchakovBlog
спасибо
Спасибо за некоторые интересные моменты.
Маленький вопросик: а почему setInterval не убили в ретерне юзэффекта?
Теперь понятно что такое мутация объекта.
18:20
Привет.
Что думаешь, если всегда использовать в таком виде:
setTask((tasks) => [...task, text])
какие плюсы:
1. Ты всегда работаешь с данными, которые хранит хук
2. Если нужно будет юзать Memo или в useState хранится объект, который нужно менять от других эффектов, то не нужно будет условный tasks прописывать в зависимости эффектов
🤔
А почему в примере с тасками вы не работаете с предыдущими значениями как в первом примере?
Бро, продолжай пожалуйста!!!
Да, давай пожалуйста про useMemo и useCallback
В первом случае что нам мешает добавить count в массив зависимости в useEffect?
Хочешь удалить из списка элемент делай просто filter c нужными условиями
Спасибо за видео. Чнм больше хуков, тем лучше.
Можете подсказать как сделать такое же плавное перемещение курсора?
Збс, продолжай!
Привет , ,с Новым годом ! а можно более подробно о мутациях ? Как правильно использовать с redux toolkit , спасибо
Благодарю, неплохо помог
Очень ждем новые видео
Отличное видео
setState(prev=>), вызывает общий стейт у компонента который ты будешь использовать на одной странице , пример : толерантный с 3 значениями которые ты можешь переключать , создаешь несколько элементов на странице , начинаешь переключать , и воля у тебя во всех компонентах меняется значения , хотя ты в других его не менял , так что нужно быть аккуратным
так это корректная работа useState ведь. он хранит одно состояние, несмотря на то, что разные компоненты снизу используют его
Спасибо за видео! Скажи, плиз, почему в случае с работой с массивами опять не воспользоваться функцией и не написать setState(prev => [...prev, newTask])?
Супер контент !!
Будут ли новые полные курсы (на несколько видосов)? Если да, то будут ли для premiddle/middle и как скоро?
спасибо! хорошо всё.
Когда будет next pizza?)
Подскажите, кто знает как цветовая тема называется? Спасибо тем кто ответит
а в самом первом примере если useEffect то почему не просто посадить count массив для отслеживания? и как так завести интервал и не убить его в return прорисовку count вообще вынести за пределы useEffect?
Топи топи интересно же и залипательно
привет еще раз ! знаю сейчас не луяшое время , но нету ли в планах сделать какой-то малеьний проект используя react , redux , rtk query , ts ? спасибо
так я опытный оказывается, не знал
Спасибо!
Формат отличный
Подскажи, есть ли у тебя что ни будь. где рассказываешь как запустить перерисовку наружних компонентов из внутренних?
Перерендер родителя из потомка?
1. Callback функцией, переданной как пропс.
2. Изменение переменной глобального стэйта приложения ( пример с условным редаксом: в чайлде используешь диспатч и изменяешь переменную, которая используется в родителе.). Наверняка есть ещё какие-нибудь извращённые способы, типо поиска элементов родителя в dom дереве и прямые манипуляции нативным джаваскриптом( всякие append и т.д.)
Спасибо за крутотень
тут видеоролик затащил только Гена Горин в конце )
Про usememo с использованием react devtools (как проверять лишние отрисовки) пожалуйста расскажи
Привет Арчаков, пожалуйста, сделайте видео о миксе useContext + useReducer в качестве замены Redux-а.