React Query за 10 минут! Быстрый курс
В этом ролике я расскажу о том, что такое React Query, как делать запрос на бэкенд, пагинацию, отправку POST запроса (мутации) и расскажу про плюсы и минусы этой библиотеки. Всё это за 11 минут!
⏰ Таймкоды:
00:00:00 Начало
00:00:46 Пишем код с помощью Axios
00:02:47 Переписываем на React Query используя useQuery
00:04:50 Делаем пагинацию useState + useQuery
00:06:00 Крутая фича с помощью refetchOnWindowFocus
00:07:22 Зачем нужен keepPreviousData
00:07:39 Используем хук useMutation для создания продуктов
00:09:05 Что такое инвалидация кэша
00:10:04 Итого
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: vk.com/archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
#react #usestate #reactquery #query #reduxquery #fetch #axios #request #cache #junior #реакт #разработка
Одно удовольствием теперь вас смотреть. Подача информации, структурно, последовательно, c примерами, без воды. Вы необычайно выросли над собой, сжатость полезной информации и визуальные подсказки - просто шик.
Отлично. Без лишней воды. Коротко и по существу. Мне нравится такой стиль - суровый)
Спасибо за шикарное объяснение, для начала в изучении react querry самое то🔥
У вас отличная дикция и супер голос :) и очень доходчиво объясняете задачи. Спасибо большое, с меня лайк и подписка + колокольчик ))
Пожалуй одна из лучших подач материала. Нет ненужного лайвкодинга с кучей опечаток и потери времени в видео как у большинства.
Рад видеть новый видос!)
Отличный и информативный видос! Дерзай😊
Новый уровень. Лайк сходу)
Спасибо! Классная подача, классный материал.
С возвращением :)
Наконец-то новое видео! Спасибо.
🔥🔥🔥 огонь! спасибо большое!
Спасибо за шикарный видос, хотелось бы увидеть что-то по нексту, особенно про датафетчинг, т.к я до некст 13 не пользовался им, а новый экспериментальный апп вызывает затруднения
Огнище! Благодарю за учебный материал) Для новичков - на вес золота такой разжёванный контент)
Вот такому контенту ЛАЙК не глядя 💪👍
Спасибо, как всегда отлично!
Отличный гайд, рекомендую начинающим.
большое спасибо, это то, что я хотел получить за 10 минут по запросу react query
+
Ура новый видос )
Классное объяснение!
из всех, всех доступней объяснил
Классное видео, спасибо!
Благодарю ❤
Арчаков как всегда доступно понятно
Спасибо за урок, останусь на swr))
огонь, спасибо большое!!!
спасибо большое, классное видео
Всё шикарно
Мужик, ты лучший
Зашибенный ролик!
привет .спасибо большое за видео , очень полезно ) не планируешь сдлеать болле большой ролик по React Query?
спасибо!👏👍
Можно гайд по SSR? Твой формат очень заходит
Отличный формат, картинка улучшилась, и скорость подачи возросла! В последнее время Растет такой стэйтер как Zustand, который в юзабилити считается более простым чем Toolkit и классический Redux. Большая просьба сделать видос по его основным возможностям (20 минут) - люблю redux, но многовато кода надо писать, особенно для асинхронщины. P.S. Спасибо за твой труд, один из лучших каналов по Js в Рутубе
Zustand - это Redux Toolkit без говнокода. А асинхронный код не надо писать на Redux - есть React Query, которая делает его ненужным говном мамонта.
@@paemox есть rtk query из коробки который выебал реакт квери
@@user-kz3xe7ps9j React Query требуется меньше boilerplate code писать и архитектура у него проще, легче отлаживать.
@@paemox Zustand нужен в случае сипорейта логики и вию, когда React Query выступает как глобальный стейт. Просто их область применения немного разная
@@rostislavpotapov7215 Некоторые "индивидумы" умудряються использовать Zustand/Redux для запросов на сервер, хотя для этого лучше подходит React Query.
Как же ты хорош
братан, контент топ!
Спасибо
Супер!!
Денис, спасибо большое за твои видео!! Всегда очень интересно и понятно объясняешь! Только у меня вопрос, а разве нельзя использовать React Query вместе с Redux?
да нахера тебе редакс то? почему не взять более простой контекстный стейт менеджер, почему все так эту хуипню превозносят?
Круто было бы разобрать также RTK Query)
Наконец-то новое видео) когда next pizza?)
Как вы задообали найдите себе работу ужн
круто обяснил👍
Подскажи пожалуйста, как ты выделил цветом кастомные теги в WebStorm?
RQ совмещают с RTK ? Или он нужен если ты не хочешь использовать стейт менеджер ?
спасибо
Можешь показать, как использовать query вместе с rrd (желательно выброс ошибки и использовать в errorPage)
Голос сильно изменился)
Я использую rtk query, похож на react query, хотелось бы дополнить, что надо пробовать разные технологии, чтобы найти лучшее для себя и не застревать на одном месте
👍👍👍👍👍👍
Ура, спасибо за контент )) Что с голосом стало ?)
Впритык к микро говорит
малый арчаков повзрослел посеньорел
Круто, спасибо, а что это за редактор кода?
Кайф
Че грозный такой
Тест поднял видимо) меняется погода, люди растут..
горячий кавказец реактмен
Сопли вытри 🤨👊
запросы на сэрвер и изЭффект 👋
Спасибо за твой труд, но давай пусть на пять минут дольше но по людски. А то как улби тв - вроде норм, а усваивать тяжело)
Посмотри западных видеоблогеров.Там есть на 50 минут и больше
Лепшы )
Сделайте pls видео о настройках Webstorma
а нельзя было использовать refetch заместо invalidateQueries ?
Ого, а что за UI в шторме? Тема какая?
а что делать, если эти же данные нужны для другой страницы\компонента?
const formData = new FormData(event.target); У меня formData получается пустая, потому что event.target это ... Что не так? или это из-за того что я bootstrap не использую
тоже самое у меня. пустой объект возвращает
Disable cache не забудьте отключить при проверке кэширования
Это лучший материал, который я когда либо видел по реакту. Спасибо за контент
Какая тема Webstorma?
Вдруг у кого-то линка на исходники есть?
Что профитнее будет , react query или rtq query?
Если планируется работать с редаксом, то второй вариант. Если релакса не будет, то первый
Бро мне срочно нужно твой совет . Вот 1 год прям работал на Реакте ( после курса в доме собирал проекты для портволио) но в итоги сейчас работаю на Vue 2 бля даже не 3 ) у нас в компании так. как то в депрессию попал . В работа не ощущаю хороший рост ( юзаем старие технологии) Скучаю по Реакту 😢 . Блин до сих пор люблю Реакт . ( работаю уже 6 мес на Вю ). Дай какой нибудь совет Арчаков бро
Продолжай работать и паралельно начинай искать работу на реакте
@@user-kz3xe7ps9j тяжело
@@user-kz3xe7ps9j может я сам решу , что мне делать?
@@user-kz3xe7ps9j да я тебя и не спрашивал, чтобы ты мне что-то разрешал,Робертониус
@@user-kz3xe7ps9j Можешь маме своей похвастаться
обычно при просмотре роликов ставлю скорость 1.5 тут же поставил 0.75)))
Как темка для WebStorm называется?
это скорее fleet
Оооо контент однако,давай след заходом rtk query😊
Доку прочти епта
@@user-kz3xe7ps9j так доку по любой теме прочитать можно,сам смак в том что бы любимый ютубер видос сделал
У него есть закрытая трансляция где он делает тестовое 6000$ на rtk query, ссылка на бусти
@@darkside2436 подпишусь,хорошее дело нужно поддержать
посмотри zustand
А в чем отличие rq от tanstack query ?
Tanstack query это и есть react-query новой версии, у библиотеки ребрендинг произошёл.
объясните зачем редакс нужен, что он решает? Выглядит как оглобля из костылей для менеджмента элементарного потока данных.
те же что и дефолтный state management или Context. Задачи те же - хранение и распределение state.
5:58
Как ты оставил коментарий за 2 дня если видео было опубликовано 18 сек назад?
Скорее всего с бутси ссылка была. Теперь Ден сделал видео общедоступным
почему не v4 версия?
Голос понизил прям как я перед тем, как принять звонок с незнакомого номера😁
По нативному Js что-то планируется?
А что по нему можно снять?
@@vladimirivanov4756 практику. Какие-то пректы
а где сам код
так ты жывой
Когда планируешь видео про Вю ?
Наконец-то, теперь Archakov понимает, что в предыдущих видео он делал глупость: 1. Получить данные с сервера 2. Положить в redux 3. Достать из redux 4. Отобразить
Погугли, что такое flux архитектура и не пиши больше своих глупых комментариев. Библиотеки развиваются и предоставляют новый функционал, отсюда возникают новые подходы к построению архитектуры. И да, стейтменеджеры никуда не делись, их продолжают использовать вместе с query.
@@dmitriyqwe9512не ужели я тебя так задел и тебе в кайф класть данные с сервера в стейт, конда они должны периодически обновляться. Гений. Открой блог tanstack поизучай почему они к этому подходу пришли. Подумай почему многие в том числе и facebook отказались от своего же дитя redux. Ты видимо застрял где то в 2017.
@@dmitriyqwe9512 и да насчет клиентских стейт менджеров с комбинацией React-query. Более современные "КЛИЕНТСКИЕ" стейт менджеры предоставляют только асинхронные методы для работы с сервером такие как RecoilJS, EffectorJS, ZustandJS и не слова про react-query, Не спорю так можно делать, но если твое приложение и близко не похоже на какой нибудь Aviasales или Банк, то это полная глупость.
Супер...но кадык не опускай
А зачем React Query если есть RTK Query?
а зачем реакт если есть вью и ангуляр?
RTK query вроде позже появился чем react query, но могу и ошибаться. А вообще они обе пошли от apollo client
React Query требуется меньше boilerplate code писать и архитектура у него проще, легче отлаживать.
@@paemox у меня мало опыта с ним поэтому не могу это отрицать, но как по мне react query и rtk query примерно на одном уровне сложности находятся.
@@darkside2436 Так вы попробуйте написать один и тот же запрос на обеих библиотеках и увидите разницу.
Интересно конечно но оооочень быстро
а зачем ты обозреваешь старую третью версию, которая уже давно устарела? Уже скоро пятая версия выйдет)
голос грубее стал))
думаю самое убого решение под реакт
а мне незашло. слишком быстро и нихера непонятно.
Я из мобильной разработки. Глядя на это я понимаю что это сделано для умственно отсталых ибо куда уже проще)))
Поняли, что для вас сделано? Приятно
Это новая эпоха фронтенда
@@darkside2436 уже проще нейронку научить генерировать подобное, все очень стандартно. Это сложно назвать программированием.
@@Polite_person_ Программирование - это процесс создания компьютерных программ. В нашем случае веб приложений(сайтов), так что это всё ещё программирование.
Ну да, ну да. Один из принципов программирования (здорового человека) - не пиши код заново. В том смысле, что если какую-то задачу нужно решать постоянно, то найди/напиши библиотеку. В веб разработке данные по API нужно получать и отправлять постоянно. Поэтому логично, что для этого делаются удобные инструменты. И это хорошо: разработчик не думает над рутинной стандартной задачей, не пишет кучу одинакового кода в каждом проекте. Не, если у тебя, "в мобильной разработке" с этим не согласны, и все пишут максимально сложно и копипастят - ну, тогда извини, кто умственно отсталый, по-моему, очевидно
а мне не оч зашел ускоренный режим. в первый раз вижу эту библу и оч сложно инспектировать код в видео