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