Припиніть блокувати інтерфейс: перериваний рендеринг у React
Рендеринг у React може заморозити ваш інтерфейс користувача.
Важкі обчислення блокують основний потік. Ваші користувачі бачать застиглий екран. Це псує враження від використання.
Перериваний рендеринг вирішує цю проблему. Він дозволяє React призупинити роботу, щоб обробити введення користувача.
Як це працює:
- React розбиває роботу на невеликі фрагменти.
- Він перевіряє наявність високопріоритетних завдань, таких як кліки або введення тексту.
- Якщо користувач взаємодіє з інтерфейсом, React призупиняє фонове завдання.
- React спочатку обробляє введення.
- Потім React відновлює фонове завдання.
Для керування цим ви використовуєте переходи (transitions). Використовуйте useTransition, щоб позначити нетермінові оновлення. Це дає React команду підтримувати інтерфейс у стані відгуку.
Не дозволяйте важкій обробці даних вбивати продуктивність вашого додатка.
Джерело: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb