useTransition и useDeferredValue хуки в React

• Хук useTransition позволяет обновлять состояние без блокирования UI.  

• Для понимания его работы нужно рассмотреть конкретные примеры.  

• Пример с кнопкой Search показывает, когда может потребоваться обновление состояния без блокирования.  

• При нажатии на кнопку Search увеличивается количество нажатий и заполняется массив из 20 тысяч элементов.  

• Обновление состояния занимает много ресурсов, что приводит к блокированию UI.  

• В реальной жизни это может привести к задержке отображения информации.  

• При нажатии на кнопку текст меняется сразу, но обновление состояния занимает много времени.  

• React объединяет два обновления состояния в одно, что называется батчинг.  

• Это приводит к одному обновлению компонента вместо двух.  

• Добавление асинхронной функции предотвращает батчинг и приводит к двум обновлениям компонента.  

• Это не всегда удобно, так как нужно, чтобы одно обновление было более важным, чем другое.  

• Хук useTransition помогает пометить изменения состояния как менее значимые.  

• Хук useTransition возвращает функцию startTransition для пометки изменений состояния как переходов.  

• Переходы позволяют различать срочные и не срочные обновления.  

• Пример: фильтры в выпадающем списке могут быть помечены как не срочные, чтобы результаты не отображались немедленно.  

• Для использования useTransition нужно пометить второе изменение состояния как переход.  

• Функция startTransition принимает функцию для изменения состояния.  

• Это позволяет пометить менее важные изменения состояния как переходы для оптимизации работы компонента.  

• Кнопка мгновенно производит действие, но вывод списка занимает время.  

• Переменная `pending` показывает, что есть ожидающий переход.  

• На основе этой переменной можно выводить индикатор загрузки.  

• Пример с проверкой правописания: мгновенный отклик, но проверка занимает время.  

• Использование `transition` уместно для ресурсоемких операций.  

• Пример с массивом: использование `map` для заполнения элементов по возрастанию.  

• Кнопка `Search history` показывает историю поиска.  

• Переменная `showSearchHistory` управляет отображением истории.  

• Без `transition` кнопка `Search history` не работает, пока не завершится текущий поиск.  

• Хук `useDeferredValue` позволяет откладывать обновление UI.  

• Перенос логики в отдельный компонент для улучшения производительности.  

• Пример использования: обновление UI без блокировки при изменении props.  

• Хуки `useDeferredValue` и `useTransition` делают обновление UI более комфортным для пользователя.  

• Приложение становится более отзывчивым и удобным в использовании.