Zustand и React query. State management в React без боли

В этом ролике мы рассмотрим стейт менеджер в React Zustand, который активно набирает популярность.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Плейлист с роликами по архитектуре - • Архитектура ПО
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@NikOroferov]

Очень хотелось бы разбор React Query.

[@SanyaSlyusarenko]

Есть ещё один замечательный подход к сторам во фронте - это Effector. Невероятно функциональный и декларативный. Контрибуторы - те же люди, кто делал Feature-Sliced-Design. Хочется увидеть обзор на Effector. Залайкайте коммент, чтобы Ульби увидел 😄👍

[@enslit]

Я FSD проникся и внедрил в проект. Просто пушка 🔥Не знал что эффектор их продукт. Обязательно теперь чекну и попробую. Спасибо за мысль)

[@vladkrutenyuk6715]

плюс! использую еффектор на постоянной основе уже давно - он классный

[@user-kh7rf2yf2d]

@@enslit FSD частично нарушает философию модульной архитектуры, когда из любой точки приложения ты достаешь компонент или хук из /user/hook/...

[@enslit]

​@@user-kh7rf2yf2d не знаю о "модульной философии" =) Методология FSD говорит нам о том, что нефиг что попало, импортить куда попало. Взять к примеру хук о котором ты пишешь - useHook (или что угодно из директории /user/hook).При правильном использовании FSD мы не сможем зависеть от этого хука в компонентах shared слоя и это отлично! так и должно быть. В остальном, кладешь этот хук, предполагаю в entities/user/ и юзай себе спокойно как ты говоришь из любой точки

[@Fodintsov]

@@user-kh7rf2yf2d Это где ж в FSD такая схема? /shared/hooks/ - это да. Никаких /user/hook быть не может. И в шаред лежат только компоненты, не несущие бизнес-логики: кнопки, дропдауны, все вот это...

[@NoName-oh9fh]

Насчёт React-Query, было бы хорошо если ты расскажешь в каких случаях стоит его использовать с стором, потому что в основном, если не всегда на мой взгляд react-query полностью убивает всякие сторы, потому что там можно хранить данные в кеше вечно и полностью сторы теряют смысл работы с сервером. + Так же react-query умеет работать с persist.

[@grenadier4702]

А прикол в том, что стор кроме как хранения юзера и каких-нибудь вещей для отрисовки сложного ui не нужен. все решается с помощью react-query + конекст с локальным состоянием для каждой страницы

[@alexey5097]

Хранить в кэше на фронте можно очень ограниченное количество информации, которое долго остается актульным типа данные юзера или данные о событиях, которые не могут измениться. В высоконагруженных системах возлагать контроль за актуальностью кэша на фронт будет глупо с точки зрения перфоманса и этим чаще всего занимается бэкенд(есть специальные алгоритмы поддержания кэша). Мы использовали персист на фронте для хранения токенов и каких-то ключей, уже и не вспомню

[@doichev-kostia]

React query - server state (данные), zustand/jotai/valtio - client state

[@daddyj2049]

@@doichev-kostia большинство клиентских Стейт менеджеров предоставляют работу с асинхронными данными, но если выбирать между клиентским стейтом и react-query, то логичнее использовать react-query. А для клиентских данных ну тут на самом деле можно использовать обычный контекст. Зачем я буду в проект заносить лишний "вес" ради того чтобы хранить какая цветовая тема сайта стоит у пользователя? Тем более если брать пример все же с получением данных, то после обновления страницы все слетит. Насчёт комментария выше соглашусь, то что для большого проекта вместо клиентского Кеша можно вынести на сервер, но опять же тут клиентский стор и не нужен, если так же будем использовать react-query. Мы просто отключим кеширование.

[@doichev-kostia]

@@daddyj2049 да, соглашусь, но, если честно, контекст не очень хорош, потому что после любого изменения стейта, он полностью перерендеривает всех children, что не очень прикольно. В наших SPA для любых данных с API, мы используем react-query, но иногда есть куски, где стейт нужно чисто клиентский и, честно говоря, я бы предпочёл zustand или jotai вместо react context

[@natalyamurashko125]

Цуштанд - с немецкого "состояние" или State 😀 Спасибо за видео! Отличная подача информации, и даже не играет роли произношение слов на разных языках. Главное - это знания, которыми Вы с нами делитесь 🎉

[@gagogoga794]

Застанд 😂 Коллегам немцам показал, очень смеялись 😂

[@savin55589]

Z нацисти😅

[@vov4egde]

Очень странно, что на том же гитхабе нет транслитерации. Что-то вроде Zustand [ˈtsuːʃtant] - a german word for "state" А вообще, кончено забавно как это произносят остальные блогеры. "Застанд" и "зЮстЭнд" пока мои самые любимые ))) На самом деле ухо режет ппц, так как живу в Германии и с коллегами разговариваю на немецком...

[@0xffsu]

Только без т на конце, просто Цуштанд :)

[@khanina2011]

Я тоже так и прочитала😂когда знаешь немецкий, читать английский становится сложнее 😂

[@user-fk8fm2iv6n]

раскидал за 10 минут! Просто и понятно! Огромное спасибо за твои старания! Ждём такой же ролик по effector)

[@user-by9wx1om9v]

спасибо за видос. очень нравится твоя форма изложения материала. всё по делу, в хорошем темпе и все понятноё. Жду продолжения видосов про архитектуру

[@racman9964]

спасибо, Тимур! Как всегда всё кратко, понятно. Лучший)

[@leonidindivid]

Видео как всегда очень приятное! Да, видео по React Query было бы здорово посмотреть, спасибо

[@Sogeking228]

Привет. Про React query, обязательно стоит сделать ролик я считаю. О том как работать с ним в ssr вместе с каким нибудь СТМ с fsd архитектурой.

[@proofit404]

Ждём про React Query, спасибо за титанические труды!

[@ilyapro2815]

Спасибо за видео! Интересный формат, продолжай.

[@_GyG_]

Спасибо за классный обзор. Хотим еще по React-Query)

[@gentleman94]

Спасибо огромное за ролик, подача как всегда на высоте! React Query тоже очень хотелось бы)

[@falsetrue7910]

Отличный ролик, краткий, лаконичный, по существу Так держать

[@xahabcemy1136]

Просто для информации: это немецкое слово и читается как цуштанд👍 . Видео огонь как всегда! Спасибо 🙏🏻

[@natalyaiv3414]

Спасибо, Тимур👍 Про Реакт интересно)

[@user-mv8bu5jy2n]

Это знак свыше!=) Только сегодня утром искал и просматривал материалы по Zustand!=)))Спасибо за работу!

[@igor5379]

ваша мольба услышана)

[@xDiezz]

зачем все эти кривые костыли и бойлерплейты когда есть мобкс, где все работает автоматом

[@Tanatos654]

Интересно было послушать про Zustand, хочется попробовать в деле) Про react-query обязательно нужен ролик!

[@user-tn1sj9zn9q]

Ждём React Query, да и много ещё чего ждём. Спасибо за шикарные видео)

[@sergeyavtsynov4470]

Поддерживаю, очень интересно будет послушать про React-query 🔥🔥🔥

[@shittywizzard5727]

Никогда не поленюсь написать "Красава, хорош, так держать, давай еще" если я досмотрел видео до конца :)

[@sultankeneev8093]

Спасибо очень информативно! Очень сильно ощутил разницу между redux и zustand

[@alexanderpotapov2774]

спасибо! Стало сразу понятно, что это, и какие есть преимущества

[@user-sn4ki6vg4b]

Интересно было послушать, спасибо. Попробую внедрить к себе в проект

[@KingSpeed74]

Спасибо за видео! Подробный разбор react-query очень нужен!)

[@user-gg7cg7gz9o]

уже 300 к бор у тебя !) поздравляю Тимур !!!!! ты заслужил !!!

[@lLoseControll]

Как всегда топ контент !

[@kegorfx]

Чтобы в девтулс отображались не анонимные экшены, в сторе при set в опциях можно передать строкой название какое хотите. Тогда в редакс девтулс наглядно всё видно

[@ivanmiarkulau8320]

Не очень понятно из видео как работать с версионированием персиста, но это уже в документации почитаю, спасибо за ролик!) Хотелось бы увидеть видео про React Query)

[@erassylzh5658]

Ждем видео про React Query. И не плохо было бы уже заменить create-react-app на Vite.

[@user-bt4lz4kv7k]

Как всегда все круто! React Query очень хочется

[@user-yj8tf7xb6g]

Как хорошо, что есть Ваш канал! Zustand react

[@Nuts_Cracker]

Спасибо! Отличное видео!

[@quazacotl]

Давай мясо! В смысле, react-query. За видео плюс)

[@user-hd7mi3tj5r]

Спасибо большое за обзор! Было бы замечательно посмотреть твой обзор React Query!)

[@sh0ny]

коммент в поддержку канала Тимура и выпуска видео по React Query😊

[@evilinarm]

Спасибо за крутое видео!

[@STELLS541]

Ждемс реакт-квери, всякие приколы в нем и хорошие паттерны написание запросов.

[@pochta1000]

Цу-Штанд (нем. Состояние / англ. state)

[@Husan203]

Классный разбор Zustand. Также хотелось бы разбор и про react-query!

[@vitalyterpilin3768]

RtQ очень нужен видос, спасибо!

[@user-ue7lj2to9q]

Отличное видео. И + за видео про React Query

[@adelinaromanova8353]

Интересно, смотрим!💥

[@VaultBoyVaultBoy]

Спасибо за ролик)

[@thetraveler7779]

Лучшее - однозначно 👍

[@user-yn5sq1fd5e]

Спасибо большое за твое хорошее дело

[@user-xi3ly4vu4m]

Захотелось написать Тимуру хороший комментарий, оставлю здесь, тк моя мини-стори завязана на этом ролике. Я пришел на замену человечку в проект, написанный наскоро на Svelte. Чинил оставленные баги, старался улучшить архитектуру в меру своих знаний. И так получилось, что один из багов представлял из себя ререндендеринг и рерутинг на главную страничку при любом изменении данных в сторе, даже если измененные данные не имели отношение к отображаемой сейчас страничке и никак не затрагивались. Почему так происходило я вообще не понимал и помочь мне особо никто не мог. В один из дней я пересматривал этот ролик и как раз обратил внимание про оговорку Тимура, что изменение формально не связанных данных в сторе с текущим компонентом все равно триггерит ререндеринг этого компонента. Проверил тестово на сторах Свелта и тоже увидел такое же поведение. Так что только благодаря Тимуру я смог осознать в чем состоит проблема и стал разгребать этого рейд босса) Спасибо большое

[@UlbiTV]

🔥🔥

[@olfi1728]

Спасибо за краткий обзор.

[@ipa_stor]

Ролик прямо как в старые-добрые:))) давно не видел те ламповые видео, с разбором какой-то локальной темы🤗 Zustand последние пол года постоянно маячит перед носом, но руки пока не дошли... Вроде крайне дружелюбный, как мишка на лого🤣

[@dontcode]

Последнее время действительно от фронта больше к общим темам ушли, но мне это наоборот нравится

[@ipa_stor]

@@dontcodeэто неплохо, но изредка вот такие ролики тоже очень приятно глянуть 👍👍👍

[@dontcode]

@@ipa_stor согласен

[@eunicsi]

как всегда супер

[@denys7567]

Спасибо за ролик. Пока выглядит как нативный React context только в профиль

[@typingaway]

React Query для работы с "серверным" стейтом приложения (server state data management), Zustand - для работы с клиентским стейтом. Если клиентское приложение тонкое (минимум бизнес логики, все данные в нужном формате возвращаются с бекенда), то возможно Zustand и другие стейт менеджеры вообще будут не нужны, но если толстое, то удобно с данными работать как раз таки через Zustand

[@theoty-js-react]

Тимур - лучший педагог!

[@wat4mon]

круто, что обозреваешь такие технологии, которые только на этапе зарождения

[@shittywizzard5727]

его уже используют в проде

[@Hytpu9]

это не про zustand, он уже довольно популярный

[@xDiezz]

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

[@shittywizzard5727]

Боли нет пока не пришлось дебажить)

[@user-ue8bh7tj5k]

Спасибо за контент! Кто знает, может когда-нибудь дойдём и до valtio. Забавный факт, у Valtio, Zustand и Jotai один автор

[@kostia-stoliarskyi]

по квери тоже надо видео!) спасибо за видос)

[@user-og1us9hb3c]

было бы интересно также как использовать react query и zustand вместе. спасибо за ролик!

[@almost-wizard]

Ждем React Query!

[@BazliMax]

Спасибо за видос

[@nadjaparzer976]

Цуштанд, это немецкий, переводится как состояние

[@dmitrydidenko694]

Ждем все , что сейчас актуально

[@ArtikMan1994]

Отличное видео. Как всегда, никакой воды. Спасибо, что уважаешь наше время. Да, очень хотелось бы посмотреть видео об Реакт Квери т.к. хочу его выучить. Не писал на нем, но точно знаю, что на данный момент это best practice, и нужно идти в ногу со временем, не отставать от рынка. Не зря в редакс-тулкит запихнули тот же РТК

[@bernizhel]

Хотелось бы понять, как работать с react-query, спасибо за разбор zustand!

[@yaroslavqwerty8609]

React query теперь ждём ролик

[@igorstadnik707]

Спасибо большое :)

[@vladimirliankevich1361]

Хочется ролик про ReactQuery! Спасибо за твои видео

[@dsn3192]

Класс 👍 спасибо

[@donottrackmepls]

Чотенько, хотелось бы еще реакт квери! Спасибо, Тимуp :)

[@Dmitriy_c-137]

Коммент в поддержку !

[@evgeniy5716]

Всё понятно и круто, спасибо! теперь ожидаем на очереди react query)

[@romanroman5820]

Спасибо за видео! Нужен обзор на react query)

[@user-sj4uc2uu2z]

Спасибо за видео, как всегда огонь! По поводу state мэнеджеров, не совсем понятно когда нужно использовать RTK, когда обычные редюсеры и extraReducers, такое видео было бы очень полезно)

[@zoombix5753]

Прикольный стейт, но все равно предпочитаю MobX за его простоту и удобность)

[@evgeniysumaev2353]

Выглядит весьма!

[@-anonim-3008]

Спасибо огромное!!! Я почему-то как один раз про mobx посмотрел видео, привык к нему, даже не смотрел на актуальность его и тем более весь, 50 кб.... Сейчас redux чутка подучу и потом на zustund можно спокойно будет переходить

[@sergeysamius1128]

Спасибо!

[@user-lj8xm1ye7q]

👍 Жду гайд по React-Query

[@filenko45]

Спасибо. Хотелось бы увидеть именно связку с React Query, как и было заявлено в названии ролика.

[@bo_ver4628]

Кликбейтить начал чувак, сообщество не одобряет

[@CQRay]

Хорош! У нас в компании это основной стейт менеджер, активно использую и в собственных проектах Для запросов у нас самописные слайсы с реакциями Жду видео о React Query

[@bambalbino]

Спасибо большое за обзор. Как всегда кратко и содержательно. Хороший стейт менеджер, но если брать мульттстор, то ИМХО эффектор вне конкуренции.

[@user-uj5mm7yj1o]

оч круто!

[@Romul3003]

react-query обязательно обзор нужен. Причем полный и всеохватывающий. Либа очень полезная, но довольно объемная по документации. Хотчелось бы структуризированную инфу. Спасибо!

[@user-tr8gr6bl2u]

Да, очень хорошая идея, сделать обзор React-Query

[@fedez007]

Видосу лайк, и ждём видео react-query ts возможно + Next ssr

[@thehuman9604]

Цуштанд -- тема классная. Уже используем в проде.

[@RomaShtep]

Добрый день. Жду обзор за BlitzJS. Использую и очень радуюсь. Жизнь стала проще.

[@arturgorbunov3792]

React Query - ждемс!

[@tesohi]

спасибо!❤

[@Ramosok]

Круто!

[@krumbo]

Super tutorial thanks.

[@anatoliiilescu839]

Посмотрим!

[@GNU_Pinus]

Очень похоже на Pinia из Vue

[@Vova-mq5wy]

Мочи видос про react query ) достаточно мало толковых видео про него на просторах ютуба

[@user-fj1vx9jv5b]

recoil здорового человека

[@17u5h]

класс, хочу!

[@user-mu2lr9zc7d]

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

[@user-yr3ub5gp3t]

Тимур, большое спасибо! очень хочется видос про react-query, а особенно сравнение с RTK-query. вроде как React-query имеет больше фичей и интереснее, но не избыточно ли? хочется узнать твое мнение. Ребята, залайкайте пожалуйста.

[@AlexandruBejenari]

+++ React Query!!!!

[@woodDacha]

Спасибо за ролик. Надо будет как то его попробовать. Effector я немного пробовал. Хотелось бы понять какой инструмент лучше брать для нового проекта. Или все таки Редакс? :)

[@igorchernov1340]

Тимур, сердечно прошу записать ролик про react-query🙏. Очень хотелось бы подробное сравнение обработчиков onError и catch при работе с axios interceptors при авторизации, ну конечно же лучшие практики💥, как пример фабрикики в которых создаются объекты queryKey, queryFn для удобной вставки в сам хук. Спасибо за контент☺, ты делаешь сообщество разработчиков в РФ лучше.

[@oughtlesss6553]

Было бы круто увидеть видос связанный с мультисторами редакса и модульным подходом