🌍 Привет мир! 👋🏻

🌍 Привет мир! 👋🏻

Привет любителям React, сегодня ваш день станет чуточку лучше, потому что я подготовил пост про useTransition, встречается редко, но после прочтения ваш 🌍 кругозор однозначно станет шире и будет +1 способ к оптимизации.

🚀 Мотивация

Еще в далеком React 18 😏 был представлен хук useTransition, задача которого повысить производительность разделяя обновление состояний на срочные и несрочные (по умолчанию все обновления считаются срочными).
Такое разделение позволяет интерфейсу оставаться отзывчивым даже при выполнении тяжелых операций.
Некоторые обновления должны выполняться как можно быстрее ☄️ (ввод данных в поле ввода, выбор значения из раскрывающегося списка), а некоторые могут иметь более низкий приоритет (фильтрация списка).

⁉️ Что за фрукт такой

useTransition позволяет пометить обновления состояния как переходные (несрочные). Такие обновления выполняются с низким приоритетом и не блокируют ✖️ действия пользователя.

const [isPending, startTransition] = useTransition();

⚙️ isPending: булька, указывает, есть ли в данный момент незавершенные переходы
⚙️ startTransition: функция, принимающая колбэк с несрочными обновлениями состояния (можно и side действия докинуть в эту функцию).

Пример ✏️

Есть поле ввода для фильтрации большого списка элементов. Без useTransition интерфейс может "подвисать" при вводе текста из-за затратных вычислений. С useTransition можно сделать фильтрацию несрочной:

import React, { useState, useTransition } from 'react';

function App({ items }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);
    startTransition(() => {
      setFilteredItems(
        items.filter((item) =>
          item.toLowerCase().includes(newQuery.toLowerCase())
        )
      );
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} placeholder="Поиск..." />
      {isPending && <p>Загрузка...</p>}
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

⬆️ В этом примере обновление query происходит мгновенно, обеспечивая отзывчивость интерфейса, а фильтрация списка обернута в startTransition, что позволяет React выполнять ее с низким приоритетом.

➕ А еще я нашел 2 отличных примера, которые можно прям потыкать и понять замысел useTransition на практике:

👎 Без использования useTransition
👍 С использованием useTransition

😆 Best practice

📎 Фильтрация или сортировка больших списков: получится плавность интерфейса при вводе текста для фильтрации.
📎 Переключение между вкладками с тяжелым контентом: избегаем задержек при рендеринге сложных компонентов.
📎 Выполнение фоновых вычислений: обновления состояния, не требующие немедленного отображения, могут быть помечены как переходные.
📎 Не отменяются сами вычисления: если операция слишком тяжелая, может потребоваться дополнительная оптимизация, мемоизация или использование Web Workers.
📎 Прерываемость: переходы можно прерывать, благодаря чему пользователь может переключиться на другое действие без ожидания завершения рендеринга.
📎 Отсутствие лишних индикаторов загрузки: переходы позволяют избежать нежелательных визуальных скачков при навигации.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#REACT