Тестируем React 19 BETA (use, useActionState, useOptimistic, useFormStatus, context)

  Рет қаралды 12,764

АйТи Синяк

АйТи Синяк

Күн бұрын

use, useActionState, useOptimistic, useFormStatus, context. 25 апреля React команда наделала много шума. Была опубликована 18.3 версия React, бета 19-ой версии и самое ценное - статья с тем, что вошло в бету 19-ой версии. И конечно же я все испытал на прочность!
React 19 beta - react.dev/blog/2024/04/25/rea...
formData MDN - developer.mozilla.org/en-US/d...
ТГ канал - t.me/it_sin9k
Поддержать Айти Синяка можно здесь:
KZfaq: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
00:00 Анонс темы
00:29 React 18.3
01:08 React compiler
01:30 Actions
02:57 useActionState
05:44 useOptimistic
07:27 Просто use
09:05 Кэшируем Promise
11:13 Сильные стороны use
12:33 use + if
13:09 Context
13:46 Ref
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k

Пікірлер: 88
@it-sin9k
@it-sin9k Ай бұрын
Если коммент наберет 1000 лайков буде обзор версии 18.3!
@koumyakusuji
@koumyakusuji 18 күн бұрын
лайкайте этот коммент ребята!!😅
@Guru-or7uw
@Guru-or7uw Ай бұрын
Включил синяка перед работой под кофе. Такое ощущение, что перед школой мультики смотрю) Хорошую вижимку делаешь, в расслабленой мультяшной форме мне заходит на все 100
@it-sin9k
@it-sin9k Ай бұрын
круто!) спасибо! всем мультики!
@user-vf9nq5hm2b
@user-vf9nq5hm2b 8 күн бұрын
[14:13 ] Пожалуй это сгодится для анимаций. Например легко сделать анимацию появления, но чтобы сделать какой-нибудь фейд-аут приходится либы для анимаций подключать, либо морочиться самому с тем чтоб фейд-аут отработал до того как компонент целиком не был убран из дома. Спасибо за видос, актуально)
@SoltRash
@SoltRash Ай бұрын
Что-то я где-то это уже видел... ах да, привет Next js
@swayok
@swayok Ай бұрын
Хуки форм выглядят интересно, но не уверен что их можно будет использовать в сложных формах где поля ввода могут зависеть от значений других поля ввода. Именно в таких формах особенно хочется какой-то оптимизации кода. Также непонятно что там с типизацией состояния. В тех же кастомных selectах можно реализовывать довольно удобные схемы когда value не является строкой, сохраняя при этом тип в onChange. При отправке на сервер данных в виде json, не form-data - это весьма удобно. Посмотрим. Вообще не понял какую задачу они предлагают решать через use(). Разруливание race condition, конечно, штука полезная, но не таким способом. Тяжелые запросы тупо заспамят сервер. Еще и кешировать промис нужно во внешнем компоненте. Выглядит не особо полезно. Разве что использование внутри if интересное, но у меня ощущение что use - не хук, а простая функция, из-за чего промис и требуется кешировать где-то. Изменения ref порадовали - наконец-то этот головняк с forwardRef решится! Я больше жду компилятор, если будет работать нормально, то можно будет сильно меньше кода писать и меньше думать о том о чем не очень-то хочется думать.
@ichestor509
@ichestor509 Ай бұрын
да вообще не понятно зачем нам хуки для форм когда есть React Hook Form, проще было бы интегрировать эту библиотеку, раз они для чего то добавили эти хуки
@user-zl5sp9yh1n
@user-zl5sp9yh1n Ай бұрын
Как всегда, ты в моем топе😊
@mokkamokka4097
@mokkamokka4097 Ай бұрын
Шикарно! просто и доступно как и во всех остальных видео, спасибо!
@it-sin9k
@it-sin9k 29 күн бұрын
Спасибо большое за поддержку!)
@holakirr
@holakirr Ай бұрын
Просто огонь , лучшее пояснение, которое я видел, спасибо!
@it-sin9k
@it-sin9k 29 күн бұрын
Спасибо большое за поддержку!)
@igor_cojocaru
@igor_cojocaru Ай бұрын
Спасибо
@DubinArtur
@DubinArtur Ай бұрын
Мне нравится желание разработчиков добавить новые хуки. Только скорее всегда многие из них окажутся ситуативными поводами похвастаться для гиков. Для остальных разработчиков это будут фичи из разряда "можно, но не нужно"
@Kildor_nsk
@Kildor_nsk Ай бұрын
Похвастаться для гиков и темы для обсудить на собеседованиях. "Какие хуки реакта вы знаете, но никогда не применяли в своих проектах?"
@AlexanderBorshak
@AlexanderBorshak Ай бұрын
Если какие-то хуки (т.е. use()) можно будет использовать в кондишинах, а какие-то нет - это же прямой путь к дичайшему говнокоду. Реакт все дальше и дальше прирастает костылями со всех сторон, и превращается из когда-то простой в использовании библиотеки с классной идеей - UI = f(state) - в какого-то франкельштейна...
@oWeRQ666
@oWeRQ666 Ай бұрын
Ограничение хуков на использование без условий обусловленно технически, для получения предыдущего состояния, контекст и промис сами являются идентификаторами, поэтому их можно использовать и без этого искусственного ограничения, однако ассинхронное использование все равно должно быть недоступно. Не сказать что часто, но бывают случаи когда контекст нужен не всегда, возможно с промисами нужно будет чаще. К тому же хуки сами по себе ломали принцип чистой функции.
@_boolive_
@_boolive_ 16 күн бұрын
с такими же мыслями воспринимаю все эти обновления. И какие-то неполноценные они.
@AlexanderBorshak
@AlexanderBorshak 16 күн бұрын
@@_boolive_ Разработчики Реакта просто двигаются в какую-то неопределенную сторону. То есть, непонятно, решают они какие-то специфические задачи Фейсбука, или стараются решить какие-то задачи сообщества - и при этом они особо и не раскрывают своих планов. В итоге выглядит как какие-то попытки переизобрести уже работающие и хорошо отлаженные вещи типа REST и RPC, которые к тому же применимы в огромном кол-ве кейсов, а не просто для отрисовки фронтенда. Но пока получается так себе - "без внятного ТЗ результат на выходе - ХЗ..."
@sergnazarchuk1003
@sergnazarchuk1003 Ай бұрын
nice
@funkjoker
@funkjoker Ай бұрын
По поводу ref cleanup это было можно делать и раньше. Если вешать callbackRef на элемент то при удалении элемента колбэк вызовется с null в качестве node и мы можем почистить event listeners на этом элементе к примеру. И по поводу use а также useContext они не зависят от порядка объявления а только от ближайшего провайдера. Чисто технически и useContext можно было в if пихнуть, но решили оставить warn из-за consistency что ли
@oWeRQ666
@oWeRQ666 Ай бұрын
Думаю clean up нужен больше для того, чтобы избежать использование внешних состояний, наверняка null все так же будет прилетать, иначе много чего поломается.
@SergeSchekhovtsov
@SergeSchekhovtsov Ай бұрын
Немного не понял, в чем особенность useOptimistic. Выглядит как обычный useState. Почему нужно использовать именно новый хук? Или там в перерисовках дело?
@it-sin9k
@it-sin9k Ай бұрын
думаю во внутрянке дело, высокий приоритет рендера, через startTransition и все такое
@Solozon3
@Solozon3 29 күн бұрын
@it-sin9k, не хочешь приехать в Ульяновск на Улкемп в июле, с каким-нибудь докладом по реакту?
@it-sin9k
@it-sin9k 29 күн бұрын
я к сожалению пока не выездной из Польши, жду получения документов и если выеду обратно въехать не смогу :(
@HEX_CAT
@HEX_CAT Ай бұрын
❤❤❤🎉🎉🎉
@jonyonee
@jonyonee 23 күн бұрын
Когда появится реакт компайлер сможем ли бы делать computed property как во vue?
@it-sin9k
@it-sin9k 22 күн бұрын
хмм, не думаю. А зачем?
@vurgunkafarzada3008
@vurgunkafarzada3008 Ай бұрын
в данном примере что мешает вместо useOptimistic использовать useState ?
@it-sin9k
@it-sin9k Ай бұрын
думаю оптимизации рендеров. Там вероятно под капотом используется еще transition хук для поднятия приоритета
@Kira_sk
@Kira_sk Ай бұрын
Стоп, а если внутри useActionState вызвать исключение ?
@user-qc8ic8tb3x
@user-qc8ic8tb3x Ай бұрын
Интересно, как внутри работает use, чтобы дальше не продолжался рендер. Вероятнее всего yield стоит какой-нибудь. По ощущениям, очередной черный ящик, использование которого без понимания внутренностей реакта может привести к сюрпризам.
@dimap6793
@dimap6793 Ай бұрын
лучше не знать... use кидает exception а Suspense его ловит, можно обернуть use в try-catch и увидеть что он кидает ошибку и там будет ворнинг что не нужно оборачивать use в try-catch. Получается что лучше всего use выносить в самый верх компонента, иначе все что до него будет лишний раз исполнятся
@dimap6793
@dimap6793 Ай бұрын
еще, честно говоря, я не совсем понимаю в чем сакральный смысл запрета на использование async function компонентов, почему не добавят такую возможность и для клиентских компонентов
@user-qc8ic8tb3x
@user-qc8ic8tb3x Ай бұрын
@@dimap6793 выходит если между suspense и use будет ErrorBoundary, то финт не сработает?)
@dimap6793
@dimap6793 Ай бұрын
@@user-qc8ic8tb3x точно не знаю, наверное как именно ErrorBoundary работает, может ErrorBoundary должен заново кидает исключение если оно пришло из Suspense
@tastypurgen
@tastypurgen Ай бұрын
компайлера не будет на релизе =(
@alexkorolev2375
@alexkorolev2375 Ай бұрын
Ты говоришь про старую эпоху двух компонентов Container + View, а какие сейчас видишь новые и эффективные подходы к решению вопроса по разделению бизнес логики и переиспользуемых UI компонентов?
@ichestor509
@ichestor509 Ай бұрын
абстракция, если ты хочешь один набор компонентов использовать в куче разных логик, такое себе решение, ибо бизнес логика не всегда совпадает, а часто в мелочах различие которое и не позволит
@chilibean6152
@chilibean6152 Ай бұрын
Заходит мультяшный стиль
@it-sin9k
@it-sin9k Ай бұрын
круто!) это упрощает нам выпуск роликов)
@tomtomson8099
@tomtomson8099 Ай бұрын
Compiler не войдёт в 19. Он отдельно будет
@it-sin9k
@it-sin9k Ай бұрын
очень жаль :(
@oWeRQ666
@oWeRQ666 Ай бұрын
@@it-sin9kМожет это и хорошо, если он не будет прибит гвоздями к реакту
@yundon8182
@yundon8182 Ай бұрын
А что за новый компилятор
@kri4evskiy
@kri4evskiy 29 күн бұрын
Давай видео про варнинги! Интересно будет прикинуть возможность перехода среднего проекта с замысловатой логикой на 19ую версию
@it-sin9k
@it-sin9k 29 күн бұрын
есть идея, такое видео записать, но надо сразу, чтобы 19-ая версия стабильная вышла)
@grandphone3585
@grandphone3585 Ай бұрын
Вы точно импортировали useFormStatus из react-dom?
@eduardkoshkelyan8670
@eduardkoshkelyan8670 Ай бұрын
точно нет )) походу из react-а пробовал
@eduardkoshkelyan8670
@eduardkoshkelyan8670 Ай бұрын
т.к. в react-dom работает на 100%
@it-sin9k
@it-sin9k Ай бұрын
вот блин, я брал его из react o_O
@tagnati5585
@tagnati5585 Ай бұрын
А где коммент про варнинги?
@alexanderbaltsevich9270
@alexanderbaltsevich9270 Ай бұрын
Уже добавил)
@fuad2069
@fuad2069 Ай бұрын
Месяц назад нужен был на подобии useOptimistic
@SmallWish
@SmallWish Ай бұрын
Он всегда нужен
@izzei-1614
@izzei-1614 Ай бұрын
@@SmallWish не всегда, многие приложения сделаны без optimistic UI
@user-xo2si2jt4f
@user-xo2si2jt4f Ай бұрын
Для реальных проектов мне для форм нужна функция валидации
@it-sin9k
@it-sin9k Ай бұрын
да, я так понимаю они тоже хотят либо нативную чтобы мы использовали, либо уже внутри хука допиливали валидацию
@topsportsevents6014
@topsportsevents6014 Ай бұрын
пока не понятно. для форм react hook form для оптимистик апдейт есть react-query (правда кода прибавляется существенно).
@sequend
@sequend Ай бұрын
useOptimistic - хук с сомнительной полезностью. Кейс: стена с записями, листаю, оставляю лайки. На очередной записи ткнул лайк (читай - добавил в избранное), useOptimistic отработал и я вижу что поставил лайк, листаю дальше и тут оказывается, что по какой-то (любой) причине запрос на сервер не прошел или вернулась ошибка. Как итог - я уверен, что запись добавлена в избранное, однако как только я зайду в избранное - этой записи не будет. 🤷‍♂ Две стороны медали.. с точки зрения UX - гуд, но для DX - придется точно также обрабатывать кейс неудачным добавлением в избранное (как-то уведомить пользователя).
@aleksprimetv
@aleksprimetv Ай бұрын
ага и потом опять скролить наверх и искать где ты там не проставил
@iwmatt
@iwmatt Ай бұрын
Из полезного: обновление рефа, контекста. Всё остальное бесполезный хлам...
@denpol9956
@denpol9956 Ай бұрын
12:15 - ни один запрос не отменился и фраза "Проблемы решены из коробки" 😵‍💫 🤯 возникают вопросы... Ладно, делаем скидку, что решены только проблемы рендера последнего ответа, остальное - проблемы негров )
@MegaBeshka
@MegaBeshka Ай бұрын
Props реактивные, а ref нет. Не вписывается в концепцию props, поэтому отдельно таскают
@Nini-sv1bd
@Nini-sv1bd Ай бұрын
Как юзал antd form так и продолжу. Лучшая форма
@user-bn2qt4ge9x
@user-bn2qt4ge9x Ай бұрын
расскажешь
@aleksprimetv
@aleksprimetv Ай бұрын
солгласен антд топчик
@user-is8ov1km3t
@user-is8ov1km3t Ай бұрын
Один гитарист приходит в магазин, покупает любую гитару за свои деньги и идет делать музыку. Другой - бесконечно изучает, как ясень или клен влияет на звук, какая накладка на гриф лучше, как материал верхнего порожка способен выделить средние частоты. При этом не создавая никаких музыкальных произведений. Во фронтенд-разработке больше всего раздражает тенденция к тому, что все мы должны быть этим вторым гитаристом, чтобы успеть за прогрессом. Вместо того, чтобы просто делать сайты, приходится большую часть времени посвящать изучению инструментария. Самое фиговое, что это все будут спрашивать на собесах и делать выводы о разработчике - а использовал ли он новые хуки из реакт19-25-50, а работал ли с новой библиотекой компонентов с революционным подходом к теням на инпутах, и т.д. Подавляющее большинство веб-приложений - это несложный CRUD, и делать его можно на чем угодно. А все эти нововведения - это самовыражение безусловно крутых разрабов из реакт-команды, которым скучно делать сайты, поэтому они работают над тем, чтобы не заскучали прикладные разрабы. Но проблема в том, что я и не думал скучать, и хочу просто делать продукт и совершенствовать свой код - не применением новых либ, а применением новых подходов в парадигме и архитектуре. Я люблю изучать новое, но не из разряда "теперь вот эту функцию пишем вот так, а это прописываем сюда". В этом нет по факту ничего нового. Но мыслительного ресурса и времени это бесконечно пережеванное старое, выдаваемое за революционное новое, отжирает прилично. PS. Это не наезд на автора, канал люблю и смотрю постоянно. Просто высказался о наболевшем.
@romanpoludnev4140
@romanpoludnev4140 Ай бұрын
Причем на собесе от разраба будут хотеть чтобы он и useOptimistic использовал, и чтобы как там componentShouldUnmount работает знал.
@Roger-qj4wu
@Roger-qj4wu Ай бұрын
Так учи ангуляр, кек. Всё что ты перечислил в основном относится к реакту
@romanpoludnev4140
@romanpoludnev4140 Ай бұрын
@@Roger-qj4wu да действительно, че это я.
@it-sin9k
@it-sin9k Ай бұрын
так почти 5 лет не было же новых версий) все было максимально стабильным))
@aboba86468
@aboba86468 Ай бұрын
@@it-sin9k ага, было стабильным) верю а весь этот ssr хайп наверное только добавил стабильности, и react к этому не имеет никакого отношения, тупа случайно рекламируя next на своём сайте
@uCryNet
@uCryNet Ай бұрын
Чем дальше, тем больше React превращается в говно. А от ref норм
@paulokaydan
@paulokaydan 5 күн бұрын
kzfaq.info/get/bejne/jrVxZqt8vba3fmQ.html для очистки таймаутов и интервалов
@skynet99xxx
@skynet99xxx 22 күн бұрын
Немного расстраивает тот факт, что для хука use как и для Suspense/Error Boundary нужно выносить логику обработки на уровень выше. Не совсем понимаю как архитектурно красиво писать код с этим. Как по мне логика const { data, error, isLoading } = useQuery(...) намного удобнее.
@it-sin9k
@it-sin9k 22 күн бұрын
согласен) по мне эта концепция не очень бьется.
Выжимка первого дня React Conf: Краткий обзор
8:59
Virtual DOM in React JS | Reconciliation | React Fiber
10:43
Когда на улице Маябрь 😈 #марьяна #шортс
00:17
UFC 302 : Махачев VS Порье
02:54
Setanta Sports UFC
Рет қаралды 929 М.
Как стартовать новый проект в 2023 году?
10:36
АйТи Синяк
Рет қаралды 30 М.
Что такое Render и Commit в React
9:53
Dev Surge
Рет қаралды 2,7 М.
Зачем на самом деле нужен хук useCallback
8:33
Михаил Непомнящий
Рет қаралды 37 М.
4 способа побороть Race Condition
6:30
АйТи Синяк
Рет қаралды 9 М.
Выжимка второго дня React Conf: Краткий обзор
7:02