В React v18 появился хук useTransition, который может показаться просто еще одним хуком, но давайте рассмотрим его использование и те указания, которые он закладывает на будущее.
Давным-давно React намекнул на концепцию параллельного режима, реализация которого сама по себе была загадкой. Однако цель заключалась в том, чтобы провести границу между медленными интенсивными операциями и столь необходимыми более быстрыми взаимодействиями пользовательского интерфейса в сложных приложениях.
Одна из практических проблем, с которой я столкнулся, будучи новичком, возникла при создании компонента поиска, который использовался для получения рекомендаций из бэкенда при каждом нажатии клавиши. Я рефакторизовал его с помощью механизма дебаунсинга, чтобы избежать слишком частых обращений к бэкенду.
Вкратце дебаунсинг означает, что вы выполняете определенное действие только через фиксированные промежутки времени. В моем случае, вызов API через 2 секунды после нажатия клавиши и отмена текущего вызова API, если после этого было зарегистрировано еще одно нажатие клавиши.
Если поразмыслить, то можно понять, что решением было вынести тяжелые операции API из основного потока ввода текста в строке поиска. Если бы он был последовательным, то набор текста в поле ввода казался бы очень медленным.
Концептуально, react сделал то же самое с помощью этого крючка. Он позволяет перенести тяжелую логику из основного потока в метод startTransition, который работает независимо от потока ввода. Это приводит к разделению работы на очереди с высоким и низким приоритетом. Это «кажущийся» прирост производительности, и его не следует путать с автоматической оптимизацией приложения со стороны реактора. Ускорение происходит для конечного пользователя, в то время как для react объем проделанной работы остается тем же. Обратите внимание, что при этом не пропускаются никакие операции между ними, т.е. расчет пользовательского интерфейса на основе состояния ввода на момент рендеринга, а просто меняется приоритет рендеринга таблицы кратных значений и процесса ввода.
Давайте посмотрим на это в действии. В нашем демонстрационном приложении мы собираемся вывести 100 000 кратных чисел, вводимых при вводе. Это вычисление является достаточно тяжелой операцией, которая будет замедлять работу нашего приложения.
Сейчас для генерации кратных чисел мы используем хук useTransition. Он предоставляет булев флаг, чтобы знать, завершен процесс или нет, и функцию startTransition, которая завершает интенсивный процесс.
Ключевым моментом, на который следует обратить внимание, является диссоциация в рендеринге между вводом и таблицей кратных значений.
Заключение
==========
Пример, который я привел, возможно, излишен для демонстрации использования этого хука, но поделитесь, где вы находите его более подходящим. Этот хук не является тем, что мы должны использовать в нашей повседневной работе, но это приветствуется подход к настройке производительности в зависимости от пользователя. Вполне возможно воспроизвести это поведение без использования этого хука, но наблюдение приоритетности задач в React указывает на хороший прогресс в параллелизме и может помочь разработчикам создать более изысканный UX.
Подключиться
==========
🏭 LinkedIn: https://www.linkedin.com/in/sameerkumar1612
✍️ Follow on Medium: https://sameer-kumar-1612.medium.com