#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

 О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок.

#new #github #codepen #sandbox

P. S. вчерашнее было случайно удалено, но терять не охота.

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

P. S. Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок, общее их название.

#new #github #codepen #sandbox

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

P. S. Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок, общее их название.

#new #github #codepen #sandbox

​​⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.

❓Как используется

- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и тоже состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состояние.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.

🤷‍♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:

- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?

Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть, что добавить — пишите в комментах.

Ещё по теме:

- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут

#react #frontend #new

#новость дня

Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации React из 2013 года.

Да, если вы не верите своим глазам или не поняли — в то время на полном серьёзе предлагалось использовать jQuery для создания AJAX-запроса данных. А что делать, что делать...

А нынче на дворе уже React 19, который вот только-только вышел, я опоздал с новостью на пару дней: https://react.dev/blog/2024/12/05/react-19

После стольких скандалов и задержек, после стольких криков о том, что React умер (нет) и не нужен (тоже нет).

Помните, я упоминал о том, что они замедлили дерево рендера в Suspense и не отрисовывали дочерние ноды, пока не разресолвится материнская? Что ж, они эту ситуацию даже отдельно вынесли, дав ссылку в самом верху, снабдив прекрасными схемами: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense

Конечно же многострадальный React Compiler тоже здесь. И передача ref как простого пропа. И улучшенная обработка ошибок (это, кстати, ломающее изменение, читайте руководство по обновлению).

Почему я вспомнил про использование jQuery для AJAX? Ну, потому что асинхронные функции уже давно не ограничиваются одной только передачей данных по сети, и для работы со статусом их обработки появился новый API — Actions и, соответственно, новые хуки: useActionState и useTransition.

Для работы с формами предложен новый хук useFormStatus, для обращения к форме из её компонента больше не нужен контекст!

Ну об API use не писал только ленивый — считывать состояние промисов никогда не было так просто.

Там ещё много интересного. И пока одни ноют о том, что бандл стал чуть больше, я планирую убрать лишние обработчики загрузки и работы с формой. Где-то я, возможно, даже откажусь от react-hook-form и react-query, просто потому что мне не нужны все их возможности и лишний бойлерплейт.

В общем, мне нравится. А вам как?

#react #release #changelog