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

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

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

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного 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
- Код из примера тут

https://t.me/cherkashindev/184

Когда то я писал что-то вроде web-crm для кастингового агентства. Минимальный набор функционала. По сути просто покажи заявки/отсортируй их.

Недавно появилось свободное время и я решил переписать ее. Но я давно горел идеей написать собственную web-crm систему, к которой можно будет подключать другие компании или вовсе адаптировать весь исходный код под их нужды.

Так вот, решил что буду писать вместе с пикабу и периодически писать мини-отчеты о ходе дел. Ну а сейчас же я хочу просто показать промежуточный этап и узнать какой дизайн по вашему мнению лучше?

В старой версии не было ничего особенного. Бесконченая лента с подгрузкой старых заявок и возможность отправить заявку в выполненные. Поиск

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

Основная идея такова:
Показать только самую важную информацию а всё остальное засунуть в саму карточку и показывать при клике.


p.s если у вас есть идеи, что можно добавить\улучшить как по дизайну, так и по функционалу - буду очень рад почитать

use — новый хук, который позволяет считывать данные из промиса и при этом интегрирован с Suspense и ErrorBoundary.

ℹ️ Основные моменты:

- На этот хук не распространяются правила хуков — его можно использовать внутри циклов и условных операторов.
- Если мы используем хук use(Promise), то где-то в родительском компоненте мы должны положить сам промис (не данные как мы делали раньше) в стейт (useState). Это позволяет избавиться от useEffect’а, который был нужен, чтобы запросить данные при первом рендере.
- Хук интегрирован с Suspense, поэтому пока промис не разрезолвится — будет показан fallback объявленный в ближайшем Suspense.
- Если промис зареджектился, то будет показан fallback объявленный в ближайшем ErrorBoundary

- Песочница тут
- Официальная документация тут

https://t.me/cherkashindev/182

Автор: Дон Гриффитс, Дэвид Гриффитс

Год: 2023

Количество страниц: 530

Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.

Скачать книгу

Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.

ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.

🔍 Основные характеристики:
- Используется React контекст, чтобы управлять состоянием
- Должен быть главный компонент, в котором хранится состояние и объявляется React контекст
- Все дочерние компоненты используют состояние через React контекст

ℹ️ Он состоит из 2 простых подходов React:
1. Композиция компонентов
2. Паттерн “Провайдер” — использование контекста React

📝 Вначале рассмотрим подходы по отдельности

1️⃣ Что такое композиция?

Вместо вот этого

Мы пишем вот так

Когда это может понадобиться? Например, когда у нас креативный дизайнер и нам нужно угодить ему:

- В одном месте, показывать карточку без иконки
- В другом, показывать карточку, где цифра то посередине, то слева, то справа, то на луне
- В третьем, нам нужно добавить иконку, чтобы при наведении показывалось описание

В итоге, мы можем легко модифицировать любую часть компонента, и по-разному их комбинировать.

2️⃣ Паттерн “Провайдер”

Здесь идёт речь об обычном использовании контекста реакта, чтобы передавать какие-то данные на любую глубину дерева компонентов, минуя дочерние компоненты.

🔄 Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.

1. TabContext — главный компонент, в котором хранится состояние и объявляется React контекст
2. Tab и TabPanel получают текущее значение активного таба неявно через React контекст. Явно значение не передаётся в каждый компонент.
3. onChange объявлен только на компоненте TabList, компоненты Tab неявно получают его из контекста.

Ещё по теме:

- Александр Дунай (Альфа-Банк) — Улучшаем качество кода React-приложения с помощью Compound Components
- JavaScript Patterns — Provider Patter
- JavaScript Pattern — Compound Pattern

https://t.me/cherkashindev/166